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] =?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>