vue2 在整个系统页面上加上用户姓名的水印

创建 mixin/watermark.js

js 复制代码

// @/mixin/watermark.js
export default {
  data() {
    return {
      waterObserver: null
    }
  },
  mounted() {
    // 登录页不渲染水印
    if (this.$route.path === '/login') return

    this.$nextTick(() => {
      this.renderWaterMark()
      this.watchWaterMark()
    })
  },
  // 路由切换监听
  watch: {
    $route(to) {
      // 跳登录页，销毁水印
      if (to.path === '/login') {
        this.destroyWaterMark()
        return
      }
      // 从登录页进入其他页面，重新生成水印
      this.renderWaterMark()
      this.watchWaterMark()
    }
  },
  beforeDestroy() {
    this.destroyWaterMark()
  },
  methods: {
    // 获取用户名
    getUserName() {
      return this.$store.state.user.name || '匿名用户'
    },
    // 生成水印
    renderWaterMark() {
      // 先清旧水印
      this.destroyWaterMark()

      const waterBox = document.createElement('div')
      waterBox.id = 'global-water-mark'
      waterBox.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 9999;
        background-repeat: repeat;
      `

      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      canvas.width = 200
      canvas.height = 120
      ctx.rotate(-20 * Math.PI / 180)
      ctx.font = '13px sans-serif'
      ctx.fillStyle = 'rgba(150,150,150,0.2)'
      ctx.fillText(this.getUserName(), 10, 70)

      waterBox.style.backgroundImage = `url(${canvas.toDataURL()})`
      document.body.appendChild(waterBox)
    },
    // 监听水印防删除 + 窗口缩放
    watchWaterMark() {
      window.addEventListener('resize', this.renderWaterMark)
      this.waterObserver = new MutationObserver(() => {
        if (!document.getElementById('global-water-mark')) {
          this.renderWaterMark()
        }
      })
      this.waterObserver.observe(document.body, { childList: true, subtree: true })
    },
    // 销毁水印、清除监听（核心方法）
    destroyWaterMark() {
      // 断开dom监听
      if (this.waterObserver) {
        this.waterObserver.disconnect()
        this.waterObserver = null
      }
      // 移除resize事件
      window.removeEventListener('resize', this.renderWaterMark)
      // 删除水印dom
      const waterBox = document.getElementById('global-water-mark')
      if (waterBox) waterBox.remove()
    }
  }
}

main.js 全局注册混入（所有页面自动生效）

js 复制代码

import Vue from 'vue'
import waterMarkMixin from '@/mixin/watermark'
Vue.mixin(waterMarkMixin)