安装
npm install y9plugin-watermark
app.vue文件引入
watermark(参数1,参数2) 参数1代表的是展示的水印内容(必填),参数类型为响应性变量(说明:插件内部水印显示的值是"参数1.value",只要符合插件能正确拿到值就可以)。
【重要】:参数1可以是字符串也可以是对象,且对象和字符串都得传响应式的值,确保组件内部拿到值的格式是xx.value; 目前对象的字段只有这四种:部门:deptName,姓名:name,IP:userIP,额外的文字内容(第二行显示):text,没有回应字段的不传,具体看情况第5点。
参数2是水印字体的大小,可以传入具体的像素字符串(如:'18px'),也可以不传,不传时默认是14px。
以下是几种情况的使用:
- 没有国际化也没有字体大小设置。
import watermark from'y9plugin-watermark/lib/index'
import { onMounted, onUnmounted,ref } from 'vue';
// 定义水印文字变量
let watermarkValue = computed(() => "重要信息请勿泄漏" );
onMounted(() => {
// 执行水印方法
watermark(watermarkValue,'14px');
});
onUnmounted(() => {
watermark('');
});
- 有国际化没有字体大小设置。
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('');
});
- 有字体大小设置,没有国际化。
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('');
});
- 有国际化且有字体大小。
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('');
});
- 有国际化没有字体大小设置,且第一个参数为对象。
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 |