vue3 给背景添加水印代码实现

由于我这default数据是从其他页面抓取的所以default值是cookie的

export default {
    props: {
        inputText: {
            type: String,
            // 设置水印文本
            default:  cookies.get("username")
        },
        inputAllowDele: {
            type: Boolean,
            default: false
        },
        inputDestroy: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            maskDiv: {}
        }
    },
    mounted() {
        // 延迟 0.3秒执行
        setTimeout(() => {
            console.log(cookies.get("username"))
            this.$nextTick(() => {
                this.init()
                if (!this.inputAllowDele) {
                    this.Monitor()
                }
            })
            console.log(new Date().getTime())
        }, 2000)
    },
    methods: {
        init() {

            let canvas = document.createElement('canvas')
            canvas.id = 'canvas'
            canvas.width = '200'
            canvas.height = '130'
            this.maskDiv = document.createElement('div')
            let ctx = canvas.getContext('2d')
            ctx.font = 'normal 18px Microsoft Yahei'
            ctx.fillStyle = 'rgb(50, 50, 50, 0.1)'
            ctx.rotate(30 * Math.PI / 180)
            if (this.inputText == null){
                ctx.fillText(cookies.get("username"), 80, 20)
            }else {
                ctx.fillText(this.inputText, 80, 20)
            }
            ctx.fillText("机密数据 请勿外传",30,50)
            let src = canvas.toDataURL('image/png')
            this.maskDiv.style.position = 'fixed'
            this.maskDiv.style.zIndex = '9999'
            this.maskDiv.id = '_waterMark'
            this.maskDiv.style.top = '30px'
            this.maskDiv.style.left = '0'
            this.maskDiv.style.width = '100%'
            this.maskDiv.style.height = '100%'
            this.maskDiv.style.pointerEvents = 'none'
            this.maskDiv.style.backgroundImage = 'URL(' + src + ')'
            document.body.appendChild(this.maskDiv)
        },
        Monitor() {
            let body = document.getElementsByTagName('body')[0]
            let options = {
                childList: true,
                attributes: true,
                characterData: true,
                subtree: true,
                attributeOldValue: true,
                characterDataOldValue: true
            }
            let observer = new MutationObserver(this.callback)
            observer.observe(body, options)
        },
        callback(mutations) {
            if (mutations[0].target.id === '_waterMark') {
                this.removeMaskDiv()
            }
            if (mutations[0].attributeName === 'id') {
                this.removeMaskDiv()
                this.init()
            }
            if (mutations[0].removedNodes[0] && mutations[0].removedNodes[0].id === '_waterMark') {
                this.init()
            }
        },
        removeMaskDiv() {
            document.body.removeChild(this.maskDiv)
        },
        createMaskDiv() {
            this.init()
        }
    },
    watch: {
        inputText() {
            this.$nextTick(() => {
                this.removeMaskDiv()
            })
        }
    },
    beforeUnmount() {
        if (this.inputDestroy) {
            this.removeMaskDiv()
        }
    },

}