feat: 水印关闭逻辑优化

This commit is contained in:
ocean-gao 2022-05-10 16:10:40 +08:00
parent f7f040f611
commit 965baf7049
2 changed files with 18 additions and 37 deletions

View File

@ -43,19 +43,12 @@ export default {
### createWatermark ### createWatermark
创建水印功能,通过 `@fesjs/fes` 导入 API 创建水印功能,通过 `@fesjs/fes` 导入 API
```js
import { createWatermark } from '@fesjs/fes'
createWatermark({ content: '我是水印' });
```
若需要动态关闭和重新打开水印,则:
```js ```js
const { close, open } = createWatermark({ content: '我是水印' }); import { createWatermark, destroyWatermark } from '@fesjs/fes';
close(); // 关闭水印 createWatermark({ content: '我是水印' }); // 生成水印
open(); // 重新打开水印 destroyWatermark(); // 销毁水印
``` ```
默认参数是: 默认参数是:

View File

@ -30,14 +30,11 @@ function timeFormat(date, format = 'YYYY-MM-DD') {
return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str])); return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str]));
} }
let _wmEnable = true; // 开关控制 let param = null; // 配置项
let _wmMo = null; // MutationObserver let _wmMo = null; // MutationObserver
let _wmTimer = null; // timestamp let _wmTimer = null; // timestamp
function _close(param) { function _destroyWatermark() {
// 开关关闭
_wmEnable = false;
// 监听器关闭 // 监听器关闭
_wmMo && _wmMo.disconnect(); _wmMo && _wmMo.disconnect();
_wmMo = null; _wmMo = null;
@ -46,18 +43,8 @@ function _close(param) {
// 删除水印元素 // 删除水印元素
const __wm = document.querySelector('.__wm'); const __wm = document.querySelector('.__wm');
__wm && param.container.removeChild(__wm); __wm && param && param.container.removeChild(__wm);
} param = null;
function _open(param) {
// 避免重复触发
_close(param);
// 开关打开
_wmEnable = true;
// 生成水印
// eslint-disable-next-line no-use-before-define
createWatermark(param);
} }
// canvas 实现 watermark // canvas 实现 watermark
@ -79,10 +66,11 @@ export function createWatermark({
if (WATERMARK_DISABLED) { if (WATERMARK_DISABLED) {
return; return;
} }
if (!_wmEnable) {
return; // 为避免多次调用 createWatermark 触发重复监听,这里先执行销毁水印操作
} _destroyWatermark();
const param = {
param = {
container, container,
width, width,
height, height,
@ -169,13 +157,13 @@ export function createWatermark({
} }
_wmTimer = window.setTimeout(() => { _wmTimer = window.setTimeout(() => {
// 触发MutationObserver // 触发 MutationObserver
watermarkDiv.style.bottom = '0'; watermarkDiv.style.bottom = '0';
}, timeout); }, timeout);
} }
}
return {
close: () => _close(param), // 销毁水印
open: () => _open(param) export function destroyWatermark() {
}; _destroyWatermark();
} }