移动端设置水印

直接上代码

<script>
export default {
  created() {
    this.water();
  },
  beforeDestroy() {
    clearInterval(this.timer)
    window.onresize = null
  },
  methods: {
    water() {
      this.setMark(this.$store.state.userInfo.loginUserName+'  '+this.$store.state.userInfo.employeeName+'  '+this.CurentTime());
    },
    setMark(str) {
      let id = this.setWatermark(str);
      this.timer = setInterval(() => {
          if (document.getElementById(id) === null) {
              id = this.setWatermark(str);
          }
      }, 500); 
      window.onresize = () => {
          this.setWatermark(str);
      };
    },
    setWatermark(str) {
      let id = "floatCavs";

      if (document.getElementById(id) !== null) {
          document.body.removeChild(document.getElementById(id));
      }

      let can = document.createElement("canvas");
      can.width = 321;
      can.height = 50;

      let cans = can.getContext("2d");
      cans.rotate((-10 * Math.PI) / 180);
      cans.font = "14.8px Vedana";
      cans.fillStyle = "rgba(200, 200, 200, 0.50)";
      cans.textAlign = "center";
      cans.textBaseline = "Middle";
      cans.fillText(str, can.width / 3, can.height / 1);

      let div = document.createElement("div");
      div.id = id;
      div.style.pointerEvents = "none";
      div.style.top = "0px";
      div.style.left = "0px";
      div.style.position = "fixed";
      div.style.zIndex = "100000";
      div.style.width = "100%";
      div.style.height = "100%";
      div.style.background =
          "url(" + can.toDataURL("image/png") + ") left top repeat";
      document.body.appendChild(div);
      return id;
    }
   
  }
}
</script>