From 8f224790022b36d49b588c8788d3d65e8a5598e3 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Fri, 10 May 2024 13:12:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E6=B0=B4=E5=8D=B0?=
 =?UTF-8?q?=E6=8C=87=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/directives/index.ts               |  3 ++-
 src/directives/modules/copy.ts        |  6 +++--
 src/directives/modules/waterMarker.ts | 36 +++++++++++++++++++++++++++
 src/views/bunny/default/index.vue     |  8 +++---
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/directives/modules/waterMarker.ts

diff --git a/src/directives/index.ts b/src/directives/index.ts
index 369e613..ba9dcab 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,7 +1,8 @@
 import { App, Directive } from 'vue';
 import copy from './modules/copy';
+import waterMarker from './modules/waterMarker';
 
-const directivesList: { [key: string]: Directive } = { copy };
+const directivesList: { [key: string]: Directive } = { copy, waterMarker };
 
 /**
  * 挂载自定义事件
diff --git a/src/directives/modules/copy.ts b/src/directives/modules/copy.ts
index f7795d7..347e134 100644
--- a/src/directives/modules/copy.ts
+++ b/src/directives/modules/copy.ts
@@ -7,7 +7,9 @@ interface ElType extends HTMLElement {
 }
 
 /**
- * 复制自定义指令
+ * * v-copy
+ * 复制某个值至剪贴板
+ * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
  */
 const copy: Directive = {
 	mounted(el: ElType, binding: DirectiveBinding) {
@@ -26,7 +28,7 @@ const copy: Directive = {
 };
 
 /**
- * 点击事件
+ * * 点击事件
  * @param this 当前作用域
  */
 function handelClick(this: any) {
diff --git a/src/directives/modules/waterMarker.ts b/src/directives/modules/waterMarker.ts
new file mode 100644
index 0000000..d7ef7c8
--- /dev/null
+++ b/src/directives/modules/waterMarker.ts
@@ -0,0 +1,36 @@
+import type { Directive, DirectiveBinding } from 'vue';
+
+const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => {
+	// 创建一个canvas元素
+	let can: HTMLCanvasElement = document.createElement('canvas');
+	// 将canvas元素添加到父元素中
+	parentNode.appendChild(can);
+	// 设置canvas元素的宽高
+	can.width = 205;
+	can.height = 140;
+	// 隐藏canvas元素
+	can.style.display = 'none';
+	// 获取canvas元素的2d上下文
+	let cans = can.getContext('2d') as CanvasRenderingContext2D;
+	// 旋转canvas元素
+	cans.rotate((-20 * Math.PI) / 180);
+	// 设置canvas元素的字体和文字颜色
+	cans.font = font || '16px Microsoft JhengHei';
+	cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)';
+	// 设置canvas元素的文本对齐方式和基线
+	cans.textAlign = 'left';
+	cans.textBaseline = 'Middle' as CanvasTextBaseline;
+	// 在canvas元素上绘制文本
+	cans.fillText(str, can.width / 10, can.height / 2);
+	// 将父元素的背景图片设置为canvas元素的dataURL
+	parentNode.style.backgroundImage = `url("${can.toDataURL('image/png')}")`;
+};
+
+const waterMarker: Directive = {
+	mounted(el: DirectiveBinding, binding: DirectiveBinding) {
+		// 调用addWaterMarker函数，给元素添加水印
+		addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);
+	},
+};
+
+export default waterMarker;
diff --git a/src/views/bunny/default/index.vue b/src/views/bunny/default/index.vue
index b42c434..3810c5e 100644
--- a/src/views/bunny/default/index.vue
+++ b/src/views/bunny/default/index.vue
@@ -1,7 +1,9 @@
 <template>
-	<h1>bunny/default页面</h1>
-	<My />
-	<RouterView />
+	<div v-waterMarker="{ text: 'Bunny Admin', textColor: 'rgba(180, 180, 180, 0.6)' }">
+		<h1>bunny/default页面</h1>
+		<My />
+		<RouterView />
+	</div>
 </template>
 
 <script setup lang="ts">