安装

npm install y9plugin-watermark

app.vue文件引入

watermark（参数1，参数2） 参数1代表的是展示的水印内容（必填），参数类型为响应性变量（说明：插件内部水印显示的值是"参数1.value"，只要符合插件能正确拿到值就可以）。

【重要】：参数1可以是字符串也可以是对象，且对象和字符串都得传响应式的值，确保组件内部拿到值的格式是xx.value； 目前对象的字段只有这四种：部门：deptName，姓名：name，IP：userIP，额外的文字内容（第二行显示）：text，没有回应字段的不传，具体看情况第5点。

参数2是水印字体的大小，可以传入具体的像素字符串（如：'18px')，也可以不传，不传时默认是14px。

以下是几种情况的使用：

1. 没有国际化也没有字体大小设置。

1import watermark from'y9plugin-watermark/lib/index'
2import { onMounted, onUnmounted,ref } from 'vue';
3// 定义水印文字变量
4let watermarkValue = computed(() => "重要信息请勿泄漏" );
5onMounted(() => {
6    // 执行水印方法 
7    watermark(watermarkValue,'14px');
8});
9onUnmounted(() => {
10    watermark('');
11});
12

2. 有国际化没有字体大小设置。

1import watermark from'y9plugin-watermark/lib/index'
2import { onMounted, onUnmounted,watch, computed } from 'vue'
3import { useSettingStore } from "@/store/modules/settingStore";
4const settingStore =useSettingStore()
5// 定义水印文字变量
6let watermarkValue = computed(() => t("重要信息请勿泄漏") );
7//监听语言变化，传入对应的水印语句
8watch( 
9    () =>useSettingStore().getWebLanguage, 
10        (newLang) => { 
11           setTimeout(() =>{
12               watermark(watermarkValue);
13           })  
14        },
15        {
16           immediate: true
17        }
18)
19onMounted(() => {
20    // 执行水印方法
21   watermark(watermarkValue);
22});
23onUnmounted(() =>{
24    watermark('');
25});
26

3. 有字体大小设置，没有国际化。

1import watermark from'y9plugin-watermark/lib/index'
2import { onMounted, onUnmounted,watch, computed } from 'vue'
3import { useSettingStore } from"@/store/modules/settingStore";
4const settingStore =useSettingStore()
5// 定义水印文字变量
6let watermarkValue = computed(() => "重要信息请勿泄漏" );
7//监听大小变化，传入对应水印文字大小
8watch( 
9    () =>useSettingStore().getFontSize, 
10        (newLang) => { 
11           setTimeout(() =>{
12               watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
13           })  
14        },
15        {
16           immediate: true
17        }
18    )
19onMounted(() => {
20    // 执行水印方法
21   watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
22});
23onUnmounted(() =>{
24    watermark('');
25});
26

4. 有国际化且有字体大小。

1import watermark from'y9plugin-watermark/lib/index'
2import { onMounted, onUnmounted,watch, computed } from 'vue'
3import { useSettingStore } from"@/store/modules/settingStore";
4const settingStore =useSettingStore()
5// 定义水印文字变量
6let watermarkValue = computed(() => t("重要信息请勿泄漏") );
7//监听语言变化，传入对应的水印语句
8watch( 
9    () =>useSettingStore().getWebLanguage, 
10        (newLang) => { 
11           setTimeout(() =>{
12               watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
13           })  
14        },
15        {
16           immediate: true
17        }
18)
19//监听大小变化，传入对应水印文字大小
20watch( 
21    () =>useSettingStore().getFontSize, 
22        (newLang) => { 
23           setTimeout(() =>{
24               watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
25           })  
26        },
27        {
28           immediate: true
29        }
30   )
31onMounted(() => {
32    // 执行水印方法
33   watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
34});
35onUnmounted(() => {
36    watermark('');
37});
38

5. 有国际化没有字体大小设置，且第一个参数为对象。

import watermark from'y9plugin-watermark/lib/index'
import { useSettingStore } from '@/store/modules/settingStore';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 第一次请求接口的方法名
import { getLoginInfo } from '@/api/home';
const settingStore = useSettingStore();
interface watermarkData {
    text?: string,
    deptName?: string,
    userIP?: string,
    name?: string
}
// 水印 可以将固定的文本先定义出来，定义的text文本记得在language文件下添加中文和英文；变量的文本后续赋值
let objInfo =  ref<watermarkData>({
    text:  computed(() => t('保守秘密，慎之又慎')), 
});
//监听语言变化，传入对应的水印语句
watch( 
    () =>useSettingStore().getWebLanguage, 
    (newLang) => { 
        // 切换语言，重新对对象中的变量赋值
        setTimeout(() =>{
            const initInfo = JSON.parse(sessionStorage.getItem('initInfo')!);  
            // 部门
            objInfo.value.deptName = t(initInfo?.department?.name);
            // IP
            objInfo.value.userIP = initInfo?.ipAddr;
            // 姓名
            objInfo.value.name = t(initInfo?.person?.name);
            // 执行水印方法
            watermark(objInfo);
        }, 100)  
    },
    {
        deep: true
    }
)
onMounted(() => {
    onMounted(async () => {
        // 第一次如果拿sessionStorage的值 是没数据的 所以这里请求了一次接口
        let res = await getLoginInfo();
        // 赋值 部门 IP 姓名
        objInfo.value.deptName = t(res.data?.department?.name);
        objInfo.value.userIP = res.data?.ipAddr;
        objInfo.value.name = t(res.data?.person?.name);
        // 执行水印方法
        watermark(objInfo);
    })
});
onUnmounted(() =>{
    watermark('');
});

版本更新说明

版本号	更新时间	更新内容	更新者
1.2.0	2023.6.1	新增显示文本可以传对象或者字符串	chensiwen