vue项目中添加水印

需求

在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．ｊｓ文件中修改长度和宽度即可，通过修改图中的数字来调整想要的效果。

参考文章：https://blog.csdn.net/qq_32917123/article/details/87253716