vue 实现最多两行水印背景

原地址：(38条消息) vue添加水印背景_vue背景水印_helenbin的博客-CSDN博客

实现效果：

• 一行水印

• 两行水印

实现步骤：

• util下新建waterMark.js

let waterMark = {};

// 判断接受值是否是对象
const isObject = (data) => {
  return Object.prototype.toString.call(data) === "[object Object]";
};

let setWatermark = (text, sourceBody) => {
  let id = "1.23452384164.123412416";

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

  let can = document.createElement("canvas");
  can.width = 300;
  can.height = 200;

  let cans = can.getContext("2d");
  cans.rotate((-20 * Math.PI) / 180);
  cans.font = "15px Vedana";
  cans.fillStyle = "rgba(0, 0, 0, .15)";
  cans.textAlign = "left";
  cans.textBaseline = "Middle";
  if (isObject(text)) {
    //对象类型
    //自行修改传入对象的属性名-->firstLine、secondLine
    cans.fillText(text.firstLine, can.width / 20, can.height);
    cans.fillText(text.secondLine, can.width / 20, can.height + 20);
  } else {
    //字符串类型
    cans.fillText(text, can.width / 20, can.height);
  }

  let water_div = document.createElement("div");
  water_div.id = id;
  water_div.style.pointerEvents = "none";
  water_div.style.background =
    "url(" + can.toDataURL("image/png") + ") left top repeat";
  if (sourceBody) {
    water_div.style.width = "100%";
    water_div.style.height = "100%";
    sourceBody.appendChild(water_div);
  } else {
    water_div.style.top = "3px";
    water_div.style.left = "0px";
    water_div.style.position = "fixed";
    water_div.style.zIndex = "100000";
    water_div.style.width = document.documentElement.clientWidth + "px";
    water_div.style.height = document.documentElement.clientHeight + "px";
    document.body.appendChild(water_div);
  }

  return id;
};

/**
 *  该方法只允许调用一次
 *  @param:
 *  @text == 水印内容,字符串或对象类型
 *  @text属性名 == 只接受两个参数，firstLine 和 secondLine
 *  @sourceBody == 水印添加在哪里，不传就是body
 * */
waterMark.set = (text, sourceBody) => {
  let id = setWatermark(text, sourceBody);
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(text, sourceBody);
    }
  }, 2000);
  window.onresize = () => {
    setWatermark(text, sourceBody);
  };
};

export default waterMark;

• 在main.js中引入文件

// 水印
import waterMark from './utils/waterMark.js';
Vue.prototype.$waterMark = waterMark;

• 外部容器组件使用全屏水印，推荐在 App.vue 中使用

created() {
    //设置一行水印
    this.$waterMark.set('一行水印');
    //设置两行水印，传递的对象属性值如果不是 firstLine 和 secondLine，需要在 warkWater.js 中修改传入的字段
    this.$waterMark.set({firstLine:'第一行水印',secondLine:'第二行水印'});
 },