需求
在vue脚手架创建的项目中,实现项目中的每个页面都显示水印,水印的内容是登录人的名字以及电话号。
最终实现的效果图如下
实现过程
1、下载:warterMark.js文件,并在项目的工具文件夹中存方warterMark.js文件。我存放的目录如下图。
2、在App.vue中:
(1)、引入warterMark.js文件
import Watermark from '../../communitycss/src/assets/utils/warterMark'//注意这了的路径是你自己存放warterMark.js文件的路径
(2)在mounted生命周期函数中实现设置水印.我这里获取了用户的姓名和手机号,然后用Watermark.set(
水印的内容)
mounted: function () {
let infor = JSON.parse(sessionStorage.getItem("HouseholdInfo"))
let allstr = infor.userName + infor.userPhone //这里拼接用户名和手机号
Watermark.set(`${allstr}`)//这里是设置水印
},
遇到的问题
问题:在实现的过程中由于拼接的内容太长了,在页面中不能完全的显示出来,值显示姓名和手机号的前半部分。
解决:在Watermark.js文件中修改长度和宽度即可,通过修改图中的数字来调整想要的效果。
参考文章:https://blog.csdn.net/qq_32917123/article/details/87253716