1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| import type { Watermark, WatermarkOptions } from 'watermark-js-plus';
|
| import { nextTick, onUnmounted, readonly, ref } from 'vue';
|
| import { updatePreferences } from '@vben/preferences';
|
| const watermark = ref<Watermark>();
| const unmountedHooked = ref<boolean>(false);
| const cachedOptions = ref<Partial<WatermarkOptions>>({
| advancedStyle: {
| colorStops: [
| {
| color: 'gray',
| offset: 0,
| },
| {
| color: 'gray',
| offset: 1,
| },
| ],
| type: 'linear',
| },
| // fontSize: '20px',
| content: '',
| contentType: 'multi-line-text',
| globalAlpha: 0.25,
| gridLayoutOptions: {
| cols: 2,
| gap: [20, 20],
| matrix: [
| [1, 0],
| [0, 1],
| ],
| rows: 2,
| },
| height: 200,
| layout: 'grid',
| rotate: 30,
| width: 160,
| });
|
| export function useWatermark() {
| async function initWatermark(options: Partial<WatermarkOptions>) {
| const { Watermark } = await import('watermark-js-plus');
|
| cachedOptions.value = {
| ...cachedOptions.value,
| ...options,
| };
| watermark.value = new Watermark(cachedOptions.value);
| updatePreferences({ app: { watermark: true } });
| await watermark.value?.create();
| }
|
| async function updateWatermark(options: Partial<WatermarkOptions>) {
| if (watermark.value) {
| await nextTick();
| await watermark.value?.changeOptions({
| ...cachedOptions.value,
| ...options,
| });
| } else {
| await initWatermark(options);
| }
| }
|
| function destroyWatermark() {
| if (watermark.value) {
| watermark.value.destroy();
| watermark.value = undefined;
| }
| updatePreferences({ app: { watermark: false } });
| }
|
| // 只在第一次调用时注册卸载钩子，防止重复注册以致于在路由切换时销毁了水印
| if (!unmountedHooked.value) {
| unmountedHooked.value = true;
| onUnmounted(() => {
| destroyWatermark();
| });
| }
|
| return {
| destroyWatermark,
| updateWatermark,
| watermark: readonly(watermark),
| };
| }
|
|
