vue中使用水印watermark-dom@2.3.0_vue watermark-dom

1.第一步：

npm i watermark-dom@2.3.0

2.在使用到水印的地方引入

import watermark from "watermark-dom";

  mounted() {
    setInterval(() => {
      // 时间
      let text = this.$utils.parseTime(new Date());
      let data = "";
      const options = {
        w_texts: [],
      };
      // 获取当前登陆人信息
      if (this.userData) {
        data = JSON.parse(this.userData);
        options.w_texts = [data.userCode, "数据服务平台", text];
      }
      console.log("options", options);
      // 设置水印
      watermark.load({
        watermark_txt: options.w_texts.join("\r\n"), //水印的内容
        watermark_color: "#777", //水印字体颜色
        watermark_fontsize: "16px", //水印字体大小
        watermark_alpha: 0.3, //水印透明度，要求设置在大于等于0.005
        watermark_angle: 30, //水印倾斜度数
        watermark_width: 180, //水印宽度
        watermark_height: 180, //水印长度
        watermark_x: 100, //水印起始位置x轴坐标
        watermark_y: 0,
        watermark_rows: 3, //水印行数
        watermark_cols: 1,
      });
    }, 1000);
  },

// 移除水印方法
watermark.remove();