安装

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. 没有国际化也没有字体大小设置。

import watermark from'y9plugin-watermark/lib/index'
import { onMounted, onUnmounted,ref } from 'vue';
// 定义水印文字变量
let watermarkValue = computed(() => "重要信息请勿泄漏" );
onMounted(() => {
    // 执行水印方法 
    watermark(watermarkValue,'14px');
});
onUnmounted(() => {
    watermark('');
});

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

import watermark from'y9plugin-watermark/lib/index'
import { onMounted, onUnmounted,watch, computed } from 'vue'
import { useSettingStore } from "@/store/modules/settingStore";
const settingStore =useSettingStore()
// 定义水印文字变量
let watermarkValue = computed(() => t("重要信息请勿泄漏") );
//监听语言变化，传入对应的水印语句
watch( 
    () =>useSettingStore().getWebLanguage, 
        (newLang) => { 
           setTimeout(() =>{
               watermark(watermarkValue);
           })  
        },
        {
           immediate: true
        }
)
onMounted(() => {
    // 执行水印方法
   watermark(watermarkValue);
});
onUnmounted(() =>{
    watermark('');
});

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

import watermark from'y9plugin-watermark/lib/index'
import { onMounted, onUnmounted,watch, computed } from 'vue'
import { useSettingStore } from"@/store/modules/settingStore";
const settingStore =useSettingStore()
// 定义水印文字变量
let watermarkValue = computed(() => "重要信息请勿泄漏" );
//监听大小变化，传入对应水印文字大小
watch( 
    () =>useSettingStore().getFontSize, 
        (newLang) => { 
           setTimeout(() =>{
               watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
           })  
        },
        {
           immediate: true
        }
    )
onMounted(() => {
    // 执行水印方法
   watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
});
onUnmounted(() =>{
    watermark('');
});

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

import watermark from'y9plugin-watermark/lib/index'
import { onMounted, onUnmounted,watch, computed } from 'vue'
import { useSettingStore } from"@/store/modules/settingStore";
const settingStore =useSettingStore()
// 定义水印文字变量
let watermarkValue = computed(() => t("重要信息请勿泄漏") );
//监听语言变化，传入对应的水印语句
watch( 
    () =>useSettingStore().getWebLanguage, 
        (newLang) => { 
           setTimeout(() =>{
               watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
           })  
        },
        {
           immediate: true
        }
)
//监听大小变化，传入对应水印文字大小
watch( 
    () =>useSettingStore().getFontSize, 
        (newLang) => { 
           setTimeout(() =>{
               watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
           })  
        },
        {
           immediate: true
        }
   )
onMounted(() => {
    // 执行水印方法
   watermark(watermarkValue, sizeObjInfo.value.baseFontSize);
});
onUnmounted(() => {
    watermark('');
});

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 |