From 277e4e847462a30714104d340e00733426cfa8f2 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Fri, 10 May 2024 12:43:48 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=F0=9F=9A=80=20v-copy=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=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           | 16 ++++++++++
 src/directives/modules/copy.ts    | 49 +++++++++++++++++++++++++++++++
 src/main.ts                       |  3 +-
 src/views/bunny/default/My.vue    | 20 +++++++++++--
 src/views/bunny/default/index.vue |  5 +++-
 5 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 src/directives/index.ts
 create mode 100644 src/directives/modules/copy.ts

diff --git a/src/directives/index.ts b/src/directives/index.ts
new file mode 100644
index 0000000..369e613
--- /dev/null
+++ b/src/directives/index.ts
@@ -0,0 +1,16 @@
+import { App, Directive } from 'vue';
+import copy from './modules/copy';
+
+const directivesList: { [key: string]: Directive } = { copy };
+
+/**
+ * 挂载自定义事件
+ */
+const directives = {
+	install: function (app: App<Element>) {
+		Object.keys(directivesList).forEach(key => {
+			app.directive(key, directivesList[key]);
+		});
+	},
+};
+export default directives;
diff --git a/src/directives/modules/copy.ts b/src/directives/modules/copy.ts
new file mode 100644
index 0000000..f7795d7
--- /dev/null
+++ b/src/directives/modules/copy.ts
@@ -0,0 +1,49 @@
+import type { DirectiveBinding } from 'vue';
+import { Directive } from 'vue';
+
+interface ElType extends HTMLElement {
+	copyData: string | number; // 定义一个属性，用于存储需要复制的数据
+	__handleClick__: any; // 定义一个属性，用于存储事件处理函数
+}
+
+/**
+ * 复制自定义指令
+ */
+const copy: Directive = {
+	mounted(el: ElType, binding: DirectiveBinding) {
+		el.copyData = binding.value;
+		el.addEventListener('click', handelClick);
+	},
+	// 指令所在组件VNode 更新时触发
+	updated(el: ElType, binding: DirectiveBinding) {
+		el.copyData = binding.value; // 更新需要复制的数据
+	},
+	// 指令与元素绑定时触发
+	beforeMount(el: ElType) {
+		// 移除点击事件
+		el.removeEventListener('click', el.__handleClick__);
+	},
+};
+
+/**
+ * 点击事件
+ * @param this 当前作用域
+ */
+function handelClick(this: any) {
+	// 创建一个 input 元素
+	const input = document.createElement('input');
+	// 将需要复制的数据赋值给 input 的 value 属性
+	input.value = this.copyData.toLocaleString();
+	// 将 input 元素添加到 body 中
+	document.body.appendChild(input);
+	// 选中 input 元素中的文本
+	input.select();
+	// 执行复制操作
+	document.execCommand('Copy');
+	// 将 input 元素从 body 中移除
+	document.body.removeChild(input);
+
+	// TODO: 如需自定义请修改提示方式
+	alert('复制成功');
+}
+export default copy;
diff --git a/src/main.ts b/src/main.ts
index 27bd4af..20b727e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,4 @@
+import directives from '@/directives';
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 import App from './App.vue';
@@ -8,5 +9,5 @@ import router from './router';
 const pinia = createPinia();
 const app = createApp(App);
 
-app.use(router).use(pinia)
+app.use(router).use(pinia).use(directives);
 app.mount('#app');
diff --git a/src/views/bunny/default/My.vue b/src/views/bunny/default/My.vue
index 03f149c..4c508f3 100644
--- a/src/views/bunny/default/My.vue
+++ b/src/views/bunny/default/My.vue
@@ -1,4 +1,18 @@
-<template>sdasd</template>
+<template>
+	<textarea type="text" v-model="myData.inputValue" />
+	<button v-copy="myData.inputValue">点击复制</button>
+</template>
 
-<script setup lang="ts"></script>
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import { reactive } from 'vue';
+const myData = reactive({
+	inputValue: '我是被复制的内容 🍒🍇🍊，2023-4-21 14:02:59',
+});
+</script>
+<style scoped lang="scss">
+textarea {
+	width: 500px;
+	height: 300px;
+	outline: 1px solid #f4dde5;
+}
+</style>
diff --git a/src/views/bunny/default/index.vue b/src/views/bunny/default/index.vue
index 369d6ce..b42c434 100644
--- a/src/views/bunny/default/index.vue
+++ b/src/views/bunny/default/index.vue
@@ -1,6 +1,9 @@
 <template>
 	<h1>bunny/default页面</h1>
+	<My />
 	<RouterView />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import My from '@/views/bunny/default/My.vue';
+</script>

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 2/5] =?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">

From 15278666c33f22387dfc0569eda07efc7e989224 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Fri, 10 May 2024 14:04:56 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E7=88=B6=E7=BA=A7?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/directives/modules/draggable.ts   | 66 +++++++++++++++++++++++++++
 src/directives/modules/waterMarker.ts | 10 ++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/directives/modules/draggable.ts

diff --git a/src/directives/modules/draggable.ts b/src/directives/modules/draggable.ts
new file mode 100644
index 0000000..e600b52
--- /dev/null
+++ b/src/directives/modules/draggable.ts
@@ -0,0 +1,66 @@
+import type { Directive } from 'vue';
+interface ELType extends HTMLElement {
+	parentNode: any;
+}
+
+/*
+	需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
+
+	思路：
+		1、设置需要拖拽的元素为absolute，其父元素为relative。
+		2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
+		3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
+		4、鼠标松开(onmouseup)时完成一次拖拽
+
+	使用：在 Dom 上加上 v-draggable 即可
+	<div class="dialog-model" v-draggable></div>
+*/
+const draggable: Directive = {
+	mounted(el: ELType) {
+		// 将光标设置为“move”，将位置设置为“absolute”
+		el.style.cursor = 'move';
+		el.style.position = 'absolute';
+		// 当元素被点击时
+		el.onmousedown = function (e) {
+			// 计算鼠标点击位置与元素左上角之间的距离
+			let disX = e.pageX - el.offsetLeft;
+			let disY = e.pageY - el.offsetTop;
+
+			// 当鼠标移动时
+			document.onmousemove = function (e) {
+				// 计算元素的新位置
+				let x = e.pageX - disX;
+				let y = e.pageY - disY;
+
+				// 计算元素可以移动到的最大位置
+				let maxX = el.parentNode.offsetWidth - el.offsetWidth;
+				let maxY = el.parentNode.offsetHeight - el.offsetHeight;
+
+				// 确保元素不会超出其父元素的边界
+				if (x < 0) {
+					x = 0;
+				} else if (x > maxX) {
+					x = maxX;
+				}
+
+				if (y < 0) {
+					y = 0;
+				} else if (y > maxY) {
+					y = maxY;
+				}
+
+				// 设置元素的新位置
+				el.style.left = x + 'px';
+				el.style.top = y + 'px';
+			};
+
+			// 当鼠标释放时
+			document.onmouseup = function () {
+				// 停止跟踪鼠标移动
+				document.onmousemove = document.onmouseup = null;
+			};
+		};
+	},
+};
+
+export default draggable;
diff --git a/src/directives/modules/waterMarker.ts b/src/directives/modules/waterMarker.ts
index d7ef7c8..5d3951a 100644
--- a/src/directives/modules/waterMarker.ts
+++ b/src/directives/modules/waterMarker.ts
@@ -1,5 +1,15 @@
 import type { Directive, DirectiveBinding } from 'vue';
 
+/*
+  需求：给整个页面添加背景水印。
+
+  思路：
+    1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
+    2、将其设置为背景图片，从而实现页面或组件水印效果
+  
+  使用：设置水印文案，颜色，字体大小即可
+  <div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
+*/
 const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => {
 	// 创建一个canvas元素
 	let can: HTMLCanvasElement = document.createElement('canvas');

From 95a4af2b083221fc96cf3d31b1ac51e4265f08b3 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Fri, 10 May 2024 16:10:13 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E5=BD=93=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=80=80=E5=87=BA=E7=BB=99=E5=87=BA=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/directives/index.ts             |  3 ++-
 src/directives/modules/existShow.ts | 20 ++++++++++++++++++++
 src/views/bunny/default/index.vue   |  2 +-
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/directives/modules/existShow.ts

diff --git a/src/directives/index.ts b/src/directives/index.ts
index ba9dcab..4015ede 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,8 +1,9 @@
 import { App, Directive } from 'vue';
 import copy from './modules/copy';
+import existShow from './modules/existShow';
 import waterMarker from './modules/waterMarker';
 
-const directivesList: { [key: string]: Directive } = { copy, waterMarker };
+const directivesList: { [key: string]: Directive } = { copy, waterMarker, existShow };
 
 /**
  * 挂载自定义事件
diff --git a/src/directives/modules/existShow.ts b/src/directives/modules/existShow.ts
new file mode 100644
index 0000000..84f7367
--- /dev/null
+++ b/src/directives/modules/existShow.ts
@@ -0,0 +1,20 @@
+import { Directive } from 'vue';
+
+interface ElType extends HTMLElement {
+	copyData: string | number; // 定义一个属性，用于存储需要复制的数据
+	__handleClick__: any; // 定义一个属性，用于存储事件处理函数
+}
+
+/**
+ * * 当关闭这个页面时提示是否退出，不需要传递参数
+ */
+const existShow: Directive = {
+	// 指令与元素绑定时触发
+	beforeMount(el: ElType) {
+		window.onbeforeunload = function (event) {
+			(event || window.event).returnValue = '确定离开此页吗？';
+		};
+	},
+};
+
+export default existShow;
diff --git a/src/views/bunny/default/index.vue b/src/views/bunny/default/index.vue
index 3810c5e..3cfbb99 100644
--- a/src/views/bunny/default/index.vue
+++ b/src/views/bunny/default/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-waterMarker="{ text: 'Bunny Admin', textColor: 'rgba(180, 180, 180, 0.6)' }">
+	<div v-waterMarker="{ text: 'Bunny Admin', textColor: 'rgba(180, 180, 180, 0.6)' }" v-existShow>
 		<h1>bunny/default页面</h1>
 		<My />
 		<RouterView />

From 176ac5971fd54c533e6f1b3e7c08b735a018a23a Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Fri, 10 May 2024 16:29:52 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E5=B0=81=E8=A3=85?=
 =?UTF-8?q?=E6=89=93=E5=8D=B0=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/existShow.ts |  7 +------
 src/directives/modules/print.ts     | 23 +++++++++++++++++++++++
 src/views/bunny/default/My.vue      |  8 +++++++-
 src/views/bunny/default/index.vue   |  6 +++++-
 5 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 src/directives/modules/print.ts

diff --git a/src/directives/index.ts b/src/directives/index.ts
index 4015ede..634d804 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,9 +1,10 @@
 import { App, Directive } from 'vue';
 import copy from './modules/copy';
 import existShow from './modules/existShow';
+import vPrint from './modules/print';
 import waterMarker from './modules/waterMarker';
 
-const directivesList: { [key: string]: Directive } = { copy, waterMarker, existShow };
+const directivesList: { [key: string]: Directive } = { copy, waterMarker, existShow, vPrint };
 
 /**
  * 挂载自定义事件
diff --git a/src/directives/modules/existShow.ts b/src/directives/modules/existShow.ts
index 84f7367..d7f9171 100644
--- a/src/directives/modules/existShow.ts
+++ b/src/directives/modules/existShow.ts
@@ -1,16 +1,11 @@
 import { Directive } from 'vue';
 
-interface ElType extends HTMLElement {
-	copyData: string | number; // 定义一个属性，用于存储需要复制的数据
-	__handleClick__: any; // 定义一个属性，用于存储事件处理函数
-}
-
 /**
  * * 当关闭这个页面时提示是否退出，不需要传递参数
  */
 const existShow: Directive = {
 	// 指令与元素绑定时触发
-	beforeMount(el: ElType) {
+	beforeMount() {
 		window.onbeforeunload = function (event) {
 			(event || window.event).returnValue = '确定离开此页吗？';
 		};
diff --git a/src/directives/modules/print.ts b/src/directives/modules/print.ts
new file mode 100644
index 0000000..177b4cf
--- /dev/null
+++ b/src/directives/modules/print.ts
@@ -0,0 +1,23 @@
+import type { DirectiveBinding } from 'vue';
+import { Directive } from 'vue';
+
+interface ElType extends HTMLElement {
+	copyData: string | number; // 定义一个属性，用于存储需要复制的数据
+	__handleClick__: any; // 定义一个属性，用于存储事件处理函数
+}
+
+const vPrint: Directive = {
+	mounted(el: ElType, binding: DirectiveBinding) {
+		el.copyData = binding.value;
+		el.addEventListener('click', handelClick);
+	},
+	beforeMount(el: ElType) {
+		el.removeEventListener('click', el.__handleClick__);
+	},
+};
+
+function handelClick(this: any) {
+	print();
+}
+
+export default vPrint;
diff --git a/src/views/bunny/default/My.vue b/src/views/bunny/default/My.vue
index 4c508f3..9426076 100644
--- a/src/views/bunny/default/My.vue
+++ b/src/views/bunny/default/My.vue
@@ -1,13 +1,19 @@
 <template>
 	<textarea type="text" v-model="myData.inputValue" />
-	<button v-copy="myData.inputValue">点击复制</button>
+	<button v-copy="myData.copyValue" @click="handelClik">点击复制</button>
+	<button v-vPrint>点击打印</button>
 </template>
 
 <script setup lang="ts">
 import { reactive } from 'vue';
 const myData = reactive({
 	inputValue: '我是被复制的内容 🍒🍇🍊，2023-4-21 14:02:59',
+	copyValue: '',
 });
+
+const handelClik = () => {
+	myData.copyValue = myData.inputValue;
+};
 </script>
 <style scoped lang="scss">
 textarea {
diff --git a/src/views/bunny/default/index.vue b/src/views/bunny/default/index.vue
index 3cfbb99..173ba7a 100644
--- a/src/views/bunny/default/index.vue
+++ b/src/views/bunny/default/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-waterMarker="{ text: 'Bunny Admin', textColor: 'rgba(180, 180, 180, 0.6)' }" v-existShow>
-		<h1>bunny/default页面</h1>
+		<h1 @click="handelClik">bunny/default页面</h1>
 		<My />
 		<RouterView />
 	</div>
@@ -8,4 +8,8 @@
 
 <script setup lang="ts">
 import My from '@/views/bunny/default/My.vue';
+
+const handelClik = () => {
+	print();
+};
 </script>