vue中动态水印

效果：

一，根元素div上增加

<div class="rootZhy"></div>

二，增加方法

watermarkZhy(content) {
        let container = document.body;
        let width = '120px';
        let height = '200px';
        let opacity = '0.2';
        let fontSize = '20px';
        let zIndex = 0;
        const args = arguments[0];
        const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="`+ width +`" height="`+ height +`">
      <text x="20%" y="20%" dy="12px"
      text-anchor="middle"
      stroke="#000000"
      stroke-width="1"
      stroke-opacity="` + opacity + `"
      fill="none"
      transform="rotate(-45, 100 10)"
      style="font-size: ${fontSize};">
      ` + content + `
      </text>
      </svg>`;
        const base64Url = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
        const rootZhy = document.querySelector('.rootZhy');
        const watermarkDiv = rootZhy || 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.classList.add('rootZhy');
        if (!rootZhy) {
          container.style.position = 'relative';
          container.insertBefore(watermarkDiv, container.firstChild);
        }
        const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
        if (MutationObserver) {
          let mo = new MutationObserver(function () {
            const rootZhy = document.querySelector('.rootZhy');
            if ((rootZhy && rootZhy.getAttribute('style') !== styleStr) || !rootZhy) {
              mo.disconnect();
              mo = null;
              this.watermarkZhy(JSON.parse(JSON.stringify(args)));
            }
          });
          mo.observe(container, {
            attributes: true,
            subtree: true,
            childList: true
          });
        }
    }

三，动态调用

this.watermarkZhy("zhaohy");

最后

以上就是安静月亮为你收集整理的vue中动态水印的全部内容，希望文章能够帮你解决vue中动态水印所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。