soc_app/src/components/waterCom.vue

<template>
  <div id="water" >
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
import {  newDateDay } from '@/utils/date.js'

export default {
  name: 'SocAppWaterCom',

  data() {
    return {
        name:'',
        userName:'',
        date:newDateDay()
    }
  },

  created(){
    this.name=JSON.parse(window.sessionStorage.getItem('SET_USER_ORGNAME'))
    this.userName=JSON.parse(window.sessionStorage.getItem('SET_USER_NAME'))
  },
  mounted() {
    this.getWater()
  },


  methods: {
    getWater(type=0) {
      let orgName=JSON.parse(sessionStorage.getItem('SET_USER_ORGNAME'))
      let userName=JSON.parse(sessionStorage.getItem('SET_USER_NAME'))
      const canvas = document.getElementById('canvas') //获取canvas
      canvas.width = 210 //设置画布宽度
      canvas.height = 150 //设置画布高度
      canvas.style.display = 'none' //隐藏画布本身
       //加层级权重

      const ctx = canvas.getContext('2d') //获取画笔
      ctx.font = '18px -apple-system'
    //   设置文字大小
      ctx.fillStyle = 'rgba(0,0,0,.1)' //设置文字颜色及透明度
      ctx.rotate(-0.4) //设置文字旋转角度
      ctx.fillText(`${userName||''}${orgName||''}${this.date}`, -10, 120) //设置显示文字内容
      const img = canvas.toDataURL('image/png') //参数默认为 image/png,可以是其他image/jpeg等，该方法返回值是一个url，是base64组成的图片的源数据、可以直接赋值给图片的src属性
      const style = `background-image:url(${img});width:1200px;z-index:111;display:${type==1? 'block':'none'};` //定义样式
      water.setAttribute('style', style) //给要添加水印的元素设置样式
    }
  }
}
</script>
<style lang="scss" scoped>
#water {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
//   z-index: -1;
  pointer-events: none;
}
</style>