Vue前端添加水印功能

概要

前端Vue在页面添加水印，且不影响页面其他功能使用，初级代码水准即可使用，且有防人修改或者删除功能！

提示：适用于Vue，组件已经封装开箱即用，有对应配置项！

技术细节

1. 需要展示水印的界面这里以demo.vue为例 引入核心文件(组件) waterMask.vue ，直接复制粘贴即可

// watermask类名不能省略， 此类名组件有检测，即使人为删除也会重新创建，提高安全性
<template>
    <div class="watermask">
        <water-mask></water-mask>
    </div>
</template>
<script>
import waterMask from './waterMark.vue';	// 文件在同级下
export default {
   
    components: {
   waterMask},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 引入核心文件(组件) waterMask.vue,和 demo.vue 位于同级下，所有的属性修改都在 data=>initProps下 不用在意怎么实现，直接复制粘贴即可，做一个合格的CV工程师

<template>
    <div class="_waterMask"></div>
</template>
<script>
export default {
   
    props: {
   
        //是否允许通过js或者开发者工具等途径修改水印DOM节点（水印的id，attribute属性，节点的删除）
        //true为允许，默认不允许
        inputAllowDele: {
   
            type: Boolean,
            default: false
        },
        //是否在销毁组件时去除水印节点（前提是允许用户修改DOM，否则去除后会再次自动生成）
        // true会，默认不会
        inputDestroy: {
   
            type: Boolean,
            default: false
        }
    },
    data() {
   
        return {
   
            drawer: true,
            maskDiv: {
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29