Vue 一招搞定前端水印开发

很多项目都会涉及到一些隐私，或者避免泄露的一些敏感数据时。这时候给页面增加水印功能就会显得尤其重要了。

1.首先是单独给某个页面或者图片增加水印功能，就需要能给指定容器去画水印。

2.还有一种，就是全局都是有水印。

1、核心方法,创建一个watermark.js

2、在main.js中全局配置

3、或者直接在页面引用

4、如果觉得字体之间的距离太大了，改这个属性就行了

安装依赖

npm install print-js --save

页面引入

import print from 'print-js'

打印按钮

<el-button type="primary" v-if="itemList.length>0" @click="printSomething">打印</el-button>

打印的内容

使用

不想要打印的内容加上水印图片 删除这块内容

<p class="titleImg"><img class="titleLogo" src="@/assets/logo/printLogo.jpg" alt=""></p> 

vue去水印方法：

1、打开Vue，点击左下角导入视频。

2、打开vue之后我们可以看到上方的一个相机标志。

3、点击右下角的图标，选择设置。

4、点开设置之后我们就可以看到关掉水印的按钮。

5、找到水印选项并选中。

6、将添加水印选项选中，使其变为灰色。

---