Vue 一招搞定前端水印开发

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

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

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

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

2、在main.js中全局配置

3、或者直接在页面引用

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

https://blog.csdn.net/qq_38158631/article/details/88058535  

好用

下面这个写在vue的index.html里，页面会被canvas撑高撑宽，试了body.html加overflow: hidden会影响滚动列表。没找到解决办法。

https://blog.csdn.net/zz_chst/article/details/82760640

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行 *** 作。

Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

批量注册指令，新建 directives/index.js 文件

在 main.js 引入并调用

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

下面分享几个实用的 Vue 自定义指令

复制粘贴指令 v-copy

长按指令 v-longpress

输入框防抖指令 v-debounce

禁止表情及特殊字符 v-emoji

图片懒加载 v-LazyLoad

权限校验指令 v-premission

实现页面水印 v-waterMarker

拖拽指令 v-draggable

v-copy

需求：实现一键复制文本内容，用于鼠标右键粘贴。

思路：

动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域

将要复制的值赋给 textarea 标签的 value 属性，并插入到 body

选中值 textarea 并复制

将 body 中插入的 textarea 移除

在第一次调用时绑定事件，在解绑时移除事件

使用：给 Dom 加上 v-copy 及复制的文本即可

剩余的请看原文

---