From ac4ea95b7f8451262fe2611a4266b05309969ea5 Mon Sep 17 00:00:00 2001
From: ocean-gao <gaopandyx@163.com>
Date: Tue, 10 May 2022 14:19:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B0=B4=E5=8D=B0=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=85=B3=E9=97=AD=E5=92=8C=E6=89=93=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/reference/plugin/plugins/watermark.md    |  8 ++++
 .../fes-plugin-watermark/src/runtime/core.js  | 48 +++++++++++++++++--
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/docs/reference/plugin/plugins/watermark.md b/docs/reference/plugin/plugins/watermark.md
index f51b70e6..53c777b0 100644
--- a/docs/reference/plugin/plugins/watermark.md
+++ b/docs/reference/plugin/plugins/watermark.md
@@ -49,6 +49,14 @@ import { createWatermark } from '@fesjs/fes'
 createWatermark({ content: '我是水印' });
 ```
 
+若需要动态关闭和重新打开水印，则：
+
+```js
+const { close, open } = createWatermark({ content: '我是水印' });
+
+close(); // 关闭水印
+open(); // 重新打开水印
+```
 
 默认参数是：
 ```js
diff --git a/packages/fes-plugin-watermark/src/runtime/core.js b/packages/fes-plugin-watermark/src/runtime/core.js
index fb3a3460..10797509 100644
--- a/packages/fes-plugin-watermark/src/runtime/core.js
+++ b/packages/fes-plugin-watermark/src/runtime/core.js
@@ -30,6 +30,36 @@ function timeFormat(date, format = 'YYYY-MM-DD') {
     return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str]));
 }
 
+let _wmEnable = true; // 开关控制
+let _wmMo = null; // MutationObserver
+let _wmTimer = null; // timestamp
+
+function _close(param) {
+    // 开关关闭
+    _wmEnable = false;
+
+    // 监听器关闭
+    _wmMo && _wmMo.disconnect();
+    _wmMo = null;
+    _wmTimer && clearTimeout(_wmTimer);
+    _wmTimer = null;
+
+    // 删除水印元素
+    const __wm = document.querySelector('.__wm');
+    __wm && param.container.removeChild(__wm);
+}
+function _open(param) {
+    // 避免重复触发
+    _close(param);
+
+    // 开关打开
+    _wmEnable = true;
+
+    // 生成水印
+    // eslint-disable-next-line no-use-before-define
+    createWatermark(param);
+}
+
 // canvas 实现 watermark
 export function createWatermark({
     container = document.body,
@@ -63,6 +93,9 @@ export function createWatermark({
         zIndex,
         timestamp
     };
+    if (!_wmEnable) {
+        return;
+    }
     const canvas = document.createElement('canvas');
     canvas.setAttribute('width', `${width}px`);
     canvas.setAttribute('height', `${height}px`);
@@ -108,17 +141,17 @@ export function createWatermark({
 
     const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
     if (MutationObserver) {
-        let mo = new MutationObserver(() => {
+        _wmMo = new MutationObserver(() => {
             __wm = document.querySelector('.__wm');
             if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
                 // 避免一直触发
-                mo.disconnect();
-                mo = null;
+                _wmMo.disconnect();
+                _wmMo = null;
                 createWatermark(param);
             }
         });
 
-        mo.observe(container, {
+        _wmMo.observe(container, {
             attributes: true,
             subtree: true,
             childList: true
@@ -135,9 +168,14 @@ export function createWatermark({
             timeout = 1000 * 60 * 60;
         }
 
-        setTimeout(() => {
+        _wmTimer = setTimeout(() => {
             // 触发MutationObserver
             watermarkDiv.style.bottom = '0';
         }, timeout);
     }
+
+    return {
+        close: () => _close(param),
+        open: () => _open(param)
+    };
 }