diff --git a/src/hooks/useWatermark.ts b/src/hooks/useWatermark.ts index 68c685e..2306c4e 100644 --- a/src/hooks/useWatermark.ts +++ b/src/hooks/useWatermark.ts @@ -28,7 +28,7 @@ const bodyEl = ref(document.body) /** * 创建水印 - * 1. 可以选择传入挂载水印的容器元素,默认时 body + * 1. 可以选择传入挂载水印的容器元素,默认是 body * 2. 做了水印防御,能有效防御别人打开控制台删除或隐藏水印 */ export function useWatermark(parentEl: Ref = bodyEl) { @@ -60,13 +60,6 @@ export function useWatermark(parentEl: Ref = bodyEl) { addParentElListener(parentEl.value) } - /** 刷新水印(防御时调用) */ - const updateWatermark = debounce(() => { - clearWatermark() - createWatermarkEl() - addParentElListener(parentEl.value!) - }, 500) - /** 创建水印元素 */ const createWatermarkEl = () => { if (watermarkEl) { @@ -128,6 +121,13 @@ export function useWatermark(parentEl: Ref = bodyEl) { removeParentElListener(parentEl.value) } + /** 刷新水印(防御时调用) */ + const updateWatermark = debounce(() => { + clearWatermark() + createWatermarkEl() + addParentElListener(parentEl.value!) + }, 100) + /** 监听水印容器的变化(DOM 变化 & DOM 大小变化) */ const addParentElListener = (targetNode: HTMLElement) => { // 防止重复添加监听 @@ -162,21 +162,22 @@ export function useWatermark(parentEl: Ref = bodyEl) { // 当观察到变动时执行的回调 const mutationCallback = debounce((mutationList: MutationRecord[]) => { // 水印的防御(防止用户手动删除水印元素或通过 CSS 隐藏水印) - mutationList.forEach((mutation) => { + const defense = debounce((mutation: MutationRecord) => { switch (mutation.type) { + case "attributes": + mutation.target === watermarkEl && updateWatermark() + break case "childList": mutation.removedNodes.forEach((item) => { item === watermarkEl && targetNode.appendChild(watermarkEl) }) break - case "attributes": - if (mutation.target === watermarkEl) { - updateWatermark() - } - break } + }, 100) + mutationList.forEach((mutation) => { + defense(mutation) }) - }, 500) + }, 100) // 创建一个观察器实例并传入回调 observer.mutationObserver = new MutationObserver(mutationCallback) // 以上述配置开始观察目标节点 diff --git a/src/views/hook-demo/use-watermark.vue b/src/views/hook-demo/use-watermark.vue index fa7de59..5e1b74b 100644 --- a/src/views/hook-demo/use-watermark.vue +++ b/src/views/hook-demo/use-watermark.vue @@ -11,7 +11,7 @@ const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark }

该示例是演示:通过调用 hook,开启或关闭水印, - 支持局部、全局、自定义样式(颜色、透明度、字体大小、字体、倾斜角度等), 并自带一定的防删除和自适应功能 + 支持局部、全局、自定义样式(颜色、透明度、字体大小、字体、倾斜角度等),并自带防御(防删、防隐藏)和自适应功能