From ead4318163b94f98ff395a868efe862774be0a63 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 13 Nov 2022 13:15:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=B0=E5=AF=8C=E6=B0=B4=E5=8D=B0?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |   2 +-
 pnpm-lock.yaml               |   8 +-
 src/views/able/watermark.vue | 156 +++++++++++++++++++++++++++++++++--
 3 files changed, 155 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index d41aa0807..82d1124d0 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "@pureadmin/components": "^1.1.0",
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.2.0",
-    "@pureadmin/utils": "^1.1.5",
+    "@pureadmin/utils": "^1.2.1",
     "@vueuse/core": "^9.5.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@wangeditor/editor": "^5.1.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab228516b..d70cd417f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,7 +22,7 @@ specifiers:
   "@pureadmin/descriptions": ^1.1.0
   "@pureadmin/table": ^1.2.0
   "@pureadmin/theme": ^2.4.0
-  "@pureadmin/utils": ^1.1.5
+  "@pureadmin/utils": ^1.2.1
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": ^3.0.1
   "@types/lodash": ^4.14.180
@@ -133,7 +133,7 @@ dependencies:
   "@pureadmin/components": 1.1.0_vue@3.2.45
   "@pureadmin/descriptions": 1.1.1_element-plus@2.2.21
   "@pureadmin/table": 1.2.0_element-plus@2.2.21
-  "@pureadmin/utils": 1.1.5_aotapuqn7htzdjltsyimavekky
+  "@pureadmin/utils": 1.2.1_aotapuqn7htzdjltsyimavekky
   "@vueuse/core": 9.5.0_vue@3.2.45
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
   "@wangeditor/editor": 5.1.22
@@ -1410,10 +1410,10 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils/1.1.5_aotapuqn7htzdjltsyimavekky:
+  /@pureadmin/utils/1.2.1_aotapuqn7htzdjltsyimavekky:
     resolution:
       {
-        integrity: sha512-5nQZyFAbs59gkMBj0WLox7BlY7llILR/ENo2QNEKW6avMt8sDL1+858EFjEbELl6enPsVvJpoCTxatmZzVjyAw==
+        integrity: sha512-qcuRwW2DoXHCblFcZcYVAypV12I2P5sw0fvBnLfREtQ3Zlx51y4z0hOByncBFrNc9vFc3CoNM9UYlzsIedNP9A==
       }
     peerDependencies:
       dayjs: "*"
diff --git a/src/views/able/watermark.vue b/src/views/able/watermark.vue
index 0198e7d72..078dde93f 100644
--- a/src/views/able/watermark.vue
+++ b/src/views/able/watermark.vue
@@ -1,21 +1,43 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
 import { useWatermark } from "@pureadmin/utils";
 
 defineOptions({
   name: "WaterMark"
 });
 
+const local = ref();
+const preventLocal = ref();
 const color = ref("#409EFF");
 const value = ref("vue-pure-admin");
 const { setWatermark, clear } = useWatermark();
+const { setWatermark: setLocalWatermark, clear: clearLocal } =
+  useWatermark(local);
+const { setWatermark: setPreventLocalWatermark } = useWatermark(preventLocal);
+
+onMounted(() => {
+  nextTick(() => {
+    setPreventLocalWatermark("无法删除的水印", {
+      forever: true,
+      width: 187,
+      height: 80
+    });
+  });
+});
+
+onBeforeUnmount(() => {
+  // 在离开该页面时清除整页水印
+  clear();
+});
 </script>
 
 <template>
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium">页面水印功能</span>
+        <span class="font-medium">
+          页面水印功能（将平台主题改为亮白色观察水印效果更明显哦）
+        </span>
       </div>
     </template>
     <span> 请输入要创建水印的值：</span>
@@ -29,10 +51,132 @@ const { setWatermark, clear } = useWatermark();
     <el-color-picker v-model="color" show-alpha />
     <br />
     <el-button @click="setWatermark(value, { fillStyle: color })">
-      创建
+      创建整页水印
     </el-button>
-    <el-button @click="clear">清除</el-button>
+    <el-button
+      @click="
+        setWatermark(value, {
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建整页渐变水印
+    </el-button>
+    <el-button
+      @click="
+        setWatermark(value, {
+          rotate: 0,
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建整页渐变且水平90度的水印
+    </el-button>
+    <el-button
+      @click="
+        setWatermark(value, {
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ],
+          shadowConfig: [20]
+        })
+      "
+    >
+      创建整页渐变且有阴影的水印
+    </el-button>
+    <el-button
+      @click="
+        setWatermark(value, {
+          globalAlpha: 0.15, // 值越低越透明
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建整页高透明渐变水印
+    </el-button>
+    <el-button @click="clear">清除整页水印</el-button>
+
+    <div
+      ref="local"
+      class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-sky-500"
+    />
+    <el-button
+      @click="
+        setLocalWatermark('局部水印', {
+          fillStyle: color,
+          width: 140,
+          height: 60
+        })
+      "
+    >
+      创建局部水印
+    </el-button>
+    <el-button
+      @click="
+        setLocalWatermark('局部水印', {
+          width: 140,
+          height: 60,
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建局部渐变水印
+    </el-button>
+    <el-button
+      @click="
+        setLocalWatermark('局部水印', {
+          width: 140,
+          height: 56.5,
+          rotate: 0,
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建局部渐变且水平90度的水印
+    </el-button>
+    <el-button
+      @click="
+        setLocalWatermark('局部水印', {
+          width: 140,
+          height: 56.5,
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ],
+          shadowConfig: [20]
+        })
+      "
+    >
+      创建局部渐变且有阴影的水印
+    </el-button>
+    <el-button @click="clearLocal">清除局部水印</el-button>
+
+    <div
+      ref="preventLocal"
+      class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-indigo-500"
+    />
   </el-card>
 </template>
-
-<style scoped></style>