mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-10-15 12:02:18 +08:00
feat: 水印关闭逻辑优化
This commit is contained in:
parent
f7f040f611
commit
965baf7049
@ -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(); // 销毁水印
|
||||||
```
|
```
|
||||||
|
|
||||||
默认参数是:
|
默认参数是:
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user