feat: 🚀 封装打印指令

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 };
 
 /**
  * 挂载自定义事件

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 = '确定离开此页吗？';
 		};

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;

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 {

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>