vue单页面应用多router页面怎么全局加水印？

Question

如图页面结构，router中会嵌套多层router，之前是在每个页面加水印，这样太麻烦了，请问怎么样在最外层加上一个全局的水印，可以覆盖到所有包括弹框，切不影响点击。
求助，谢谢。

Answer 1

canvasWM(
    {
      container = document.body,
      width = '300px',
      height = '200px',
      textAlign = 'center',
      textBaseline = 'middle',
      font = '12px Microsoft Yahei',
      fillStyle = 'rgba(184, 184, 184, 0.3)',
      content = '请勿外传',
      rotate = '30',
      zIndex = 10000
    } = {}) {
    const args = arguments[0];
    const canvas = document.createElement('canvas');

    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    const ctx = canvas.getContext('2d');

    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate(Math.PI / 180 * rotate);
    ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

    const base64Url = canvas.toDataURL();
    const __wm = document.querySelector('#__wm');

    const watermarkDiv = __wm || document.createElement('div');

    const styleStr = `
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:${zIndex};
      pointer-events:none;
      background-repeat:repeat;
      background-image:url('${base64Url}')`;

    watermarkDiv.setAttribute('style', styleStr);
    watermarkDiv.setAttribute('id', '__wm');

    if (!__wm) {
      container.insertBefore(watermarkDiv, container.firstChild);
    }
    const MutationObserver = window.MutationObserver || window['WebKitMutationObserver'];
    if (MutationObserver) {
      let mo = new MutationObserver(() => {
        const __wm = document.querySelector('#__wm');
        // 只在__wm元素变动才重新调用 canvasWM
        if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
          // 避免一直触发
          mo.disconnect();
          mo = null;
          Message.warning({
            message: '警告： ' + content + ' 在删除水印'
          });

          this.canvasWM(args);
        }
      });
      mo.observe(container, {
        attributes: true,
        subtree: true,
        childList: true
      });
    }
  }