fix: 解决水印问题 (#191)

packages/fes-plugin-watermark/src/runtime/core.js

@@ -30,40 +30,39 @@ function timeFormat(date, format = 'YYYY-MM-DD') {
     return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str]));
 }
 
-const defaultOption = {
+let wmContainerObx = null; // MutationObserver
-    content: '请勿外传',
+let wmObx = null; // MutationObserver
-    container: document.body,
+let wmTimer = null; // timestamp
-    width: 300,
+let watermarkDiv = null;
-    height: 300,
-    textAlign: 'center',
-    textBaseline: 'middle',
-    fontSize: '14px',
-    fontFamily: 'Microsoft Yahei',
-    fillStyle: 'rgba(184, 184, 184, 0.3)',
-    rotate: 25,
-    zIndex: 99999,
-    timestamp: 'YYYY-MM-DD HH:mm'
-};
 
-let _wmMo = null; // MutationObserver
+// 销毁水印
-let _wmTimer = null; // timestamp
+export function destroyWatermark() {
+    // 监听器关闭
+    wmObx?.disconnect();
+    wmObx = null;
+    wmContainerObx?.disconnect();
+    wmContainerObx = null;
+    // 清除timer
+    if (wmTimer) {
+        window.clearTimeout(wmTimer);
+        wmTimer = null;
+    }
+    // 删除水印元素
+    watermarkDiv?.parentNode?.removeChild(watermarkDiv);
+    watermarkDiv = null;
+}
 
-function _createWatermark(param) {
+function innerCreateWatermark(param) {
     const {
-        content,
+        content, container, width, height, textAlign, textBaseline, fontSize, fontFamily, fillStyle, rotate, zIndex, timestamp, watch
-        container,
-        width,
-        height,
-        textAlign,
-        textBaseline,
-        fontSize,
-        fontFamily,
-        fillStyle,
-        rotate,
-        zIndex,
-        timestamp
     } = param;
 
+    if (!container) {
+        return console.warn('createWatermark配置的container不能为空');
+    }
+
+    destroyWatermark();
+
     const canvas = document.createElement('canvas');
     canvas.setAttribute('width', `${width}px`);
     canvas.setAttribute('height', `${height}px`);
@@ -75,19 +74,14 @@ function _createWatermark(param) {
     ctx.fillStyle = fillStyle;
     ctx.translate(width / 2, height / 2);
     ctx.rotate(-(Math.PI / 180) * rotate);
-    ctx.fillText(
+    ctx.fillText(`${content}`, 0, 0);
-        `${content}`,
+    if (timestamp) {
-        0,
+        ctx.fillText(`${timeFormat(new Date(), timestamp)}`, 0, parseInt(fontSize) + 5);
-        0
+    }
-    );
-    timestamp && ctx.fillText(
-        `${timeFormat(new Date(), timestamp)}`,
-        0,
-        parseInt(fontSize) + 5
-    );
 
-    let __wm = document.querySelector('.__wm');
+    const CLASS_NAME = `wm_${Date.now()}`;
-    const watermarkDiv = __wm || document.createElement('div');
+
+    watermarkDiv = document.createElement('div');
     const styleStr = `
     position: ${container === document.body ? 'fixed' : 'absolute'};
     user-select: none;
@@ -99,31 +93,36 @@ function _createWatermark(param) {
     pointer-events: none !important;
     background-repeat: repeat;
     background-image: url('${canvas.toDataURL()}')`;
-
     watermarkDiv.setAttribute('style', styleStr);
-    watermarkDiv.classList.add('__wm');
+    watermarkDiv.classList.add(CLASS_NAME);
 
-    if (!__wm) {
+    if (container.firstChild) {
         container.insertBefore(watermarkDiv, container.firstChild);
+    } else {
+        container.appendChild(watermarkDiv);
     }
 
-    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+    const MutationObserver = window.MutationObserver;
-    if (MutationObserver) {
+    if (watch && MutationObserver) {
-        _wmMo = new MutationObserver(() => {
+        wmContainerObx = new MutationObserver(() => {
-            __wm = document.querySelector('.__wm');
+            if (!container.querySelector(`.${CLASS_NAME}`)) {
-            if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
+                innerCreateWatermark(param);
-                // 避免一直触发
-                _wmMo.disconnect();
-                _wmMo = null;
-                _createWatermark(param);
             }
         });
 
-        _wmMo.observe(container, {
+        wmContainerObx.observe(container, {
-            attributes: true,
-            subtree: true,
             childList: true
         });
+
+        wmObx = new MutationObserver(() => {
+            if (watermarkDiv.getAttribute('style') !== styleStr) {
+                innerCreateWatermark(param);
+            }
+        });
+
+        wmObx.observe(watermarkDiv, {
+            attributes: true
+        });
     }
 
     if (timestamp) {
@@ -136,26 +135,12 @@ function _createWatermark(param) {
             timeout = 1000 * 60 * 60;
         }
 
-        _wmTimer = window.setTimeout(() => {
+        wmTimer = window.setTimeout(() => {
-            // 触发 MutationObserver
+            innerCreateWatermark(param);
-            watermarkDiv.style.bottom = '0';
         }, timeout);
     }
 }
 
-// 销毁水印
-export function destroyWatermark() {
-    // 监听器关闭
-    _wmMo && _wmMo.disconnect();
-    _wmMo = null;
-    _wmTimer && window.clearTimeout(_wmTimer);
-    _wmTimer = null;
-
-    // 删除水印元素
-    const __wm = document.querySelector('.__wm');
-    __wm && __wm.parentNode.removeChild(__wm);
-}
-
 // canvas 实现 watermark
 export function createWatermark(option) {
     // eslint-disable-next-line no-undef
@@ -163,10 +148,23 @@ export function createWatermark(option) {
         return;
     }
 
-    // 为避免多次调用 createWatermark 触发重复监听，这里先执行销毁水印操作
+    const defaultOption = {
-    destroyWatermark();
+        content: '请勿外传',
+        container: document.body,
+        width: 300,
+        height: 300,
+        textAlign: 'center',
+        textBaseline: 'middle',
+        fontSize: '14px',
+        fontFamily: 'Microsoft Yahei',
+        fillStyle: 'rgba(184, 184, 184, 0.3)',
+        rotate: 25,
+        zIndex: 99999,
+        timestamp: 'YYYY-MM-DD HH:mm',
+        watch: true
+    };
 
-    _createWatermark({
+    innerCreateWatermark({
         ...defaultOption,
         ...option
     });