├── README.md
└── waterMark.vue


/README.md:
--------------------------------------------------------------------------------
 1 | ### waterMark component
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | #### 使用方法
 6 | 
 7 | 
 8 | ``` 
 9 | <template>
10 |     <div>
11 |         <water-mask>        
12 |         </water-mask>
13 |     </div>
14 | </template>
15 | 
16 | <script>
17 |     import waterMask from '../../components/waterMark';
18 |     export default {
19 |         components: {
20 |             waterMask
21 |         }
22 |     }
23 | </script>
24 | ```
25 | 
26 | 


--------------------------------------------------------------------------------
/waterMark.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div></div>
  3 | </template>
  4 | <script>
  5 | export default {
  6 |     props: {
  7 |         //显示的水印文本
  8 |         inputText: {
  9 |             type: String,
 10 |             default: 'stephenO_o'
 11 |         },
 12 |         //是否允许通过js或者开发者工具等途径修改水印DOM节点（水印的id，attribute属性，节点的删除）
 13 |         //true为允许，默认不允许
 14 |         inputAllowDele: {
 15 |             type: Boolean,
 16 |             default: false
 17 |         },
 18 |         //是否在销毁组件时去除水印节点（前提是允许用户修改DOM，否则去除后会再次自动生成）
 19 |         // true会，默认不会
 20 |         inputDestroy: {
 21 |             type: Boolean,
 22 |             default: false
 23 |         }
 24 |     },
 25 |     data() {
 26 |         return {
 27 |             maskDiv: {} //当前显示的水印div节点DOM对象
 28 |         }
 29 |     },
 30 |     mounted() {
 31 |         //确认DOM渲染后再执行
 32 |         this.$nextTick(() => {
 33 |             //创建水印节点
 34 |             this.init()
 35 |             if(!this.inputAllowDele) {
 36 |                 // 设置水印节点修改的DOM事件
 37 |                 this.Monitor()
 38 |             }
 39 |         })
 40 |     },
 41 |     methods: {
 42 |         init() {
 43 |             let canvas = document.createElement('canvas')
 44 |             canvas.id = 'canvas'
 45 |             canvas.width = '200' //单个水印的宽高
 46 |             canvas.height = '130'
 47 |             this.maskDiv = document.createElement('div')
 48 |             let ctx = canvas.getContext('2d')
 49 |             ctx.font = 'normal 18px Microsoft Yahei' //设置样式
 50 |             ctx.fillStyle = 'rgb(112, 113, 114, 0.1)' //水印字体颜色
 51 |             ctx.rotate(30 * Math.PI / 180) //水印偏转角度
 52 |             ctx.fillText(this.inputText, 30, 20)
 53 |             let src = canvas.toDataURL('image/png')
 54 |             this.maskDiv.style.position = 'fixed'
 55 |             this.maskDiv.style.zIndex = '9999'
 56 |             this.maskDiv.id = '_waterMark'
 57 |             this.maskDiv.style.top = '30px'
 58 |             this.maskDiv.style.left = '0'
 59 |             this.maskDiv.style.width = '100%'
 60 |             this.maskDiv.style.height = '100%'
 61 |             this.maskDiv.style.pointerEvents = 'none'
 62 |             this.maskDiv.style.backgroundImage = 'URL(' + src + ')'
 63 |             // 水印节点插到body下
 64 |             document.body.appendChild(this.maskDiv)
 65 |         },
 66 |         Monitor() {
 67 |             let body = document.getElementsByTagName('body')[0]
 68 |             let options = {
 69 |                 childList: true,
 70 |                 attributes: true,
 71 |                 characterData: true,
 72 |                 subtree: true,
 73 |                 attributeOldValue: true,
 74 |                 characterDataOldValue: true
 75 |             }
 76 |             let observer = new MutationObserver(this.callback)
 77 |             observer.observe(body, options)  //监听body节点
 78 |         },
 79 |         //DOM改变执行callback
 80 |         callback(mutations, observer) {
 81 |             //当attribute属性被修改
 82 |             if(mutations[0].target.id === '_waterMark') {
 83 |                 this.removeMaskDiv()
 84 |             }
 85 |             //当id被改变时
 86 |             if(mutations[0].attributeName === 'id') {
 87 |                 this.removeMaskDiv()
 88 |                 this.init()
 89 |             }
 90 |             //当节点被删除
 91 |             if(mutations[0].removedNodes[0] && mutations[0].removedNodes[0].id === '_waterMark') {
 92 |                 this.init()
 93 |             }
 94 |         },
 95 |         /* public */
 96 |         //手动销毁水印DOM
 97 |         removeMaskDiv () {
 98 |             document.body.removeChild(this.maskDiv)
 99 |         },
100 |         //手动生成水印
101 |         createMaskDiv () {
102 |             this.init()
103 |         }
104 |     },
105 |     watch: {
106 |         //监听传入水印文本变化
107 |         inputText () {
108 |             this.$nextTick (() => {
109 |                 this.removeMaskDiv()
110 |             })
111 |         }
112 |     },
113 |     destroy (){
114 |         //组件销毁时去除生成在body节点下的水印节点
115 |         if(this.inputDestroy) {
116 |             this.removeMaskDiv()
117 |         }
118 |     }
119 | }
120 | </script>
121 | 


--------------------------------------------------------------------------------