From 7294244d7d55623b4ff7e2be2249d9a564c07c46 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Tue, 23 Jul 2024 19:32:08 +0800
Subject: [PATCH] =?UTF-8?q?little:=20=E6=B5=8B=E8=AF=95=E6=8C=87=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/directives/modules/custom.ts                    | 11 +++++++++--
 .../test-instruction/test-instruction.vue           | 13 +++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/directives/modules/custom.ts b/src/directives/modules/custom.ts
index 3711cd7..3d582c6 100644
--- a/src/directives/modules/custom.ts
+++ b/src/directives/modules/custom.ts
@@ -1,8 +1,15 @@
 import { Directive } from "vue";
 
 const custom: Directive = {
-  mounted(el, binding) {
-    el.style.color = binding.value;
+  mounted(el, binding, vnode) {
+    el.__onClick__ = () => {
+      binding.value(vnode.props);
+    };
+    el.addEventListener("click", el.__onClick__);
+  },
+  beforeUnmount(el) {
+    // 解绑dom上的点击事件
+    el.removeEventListener("click", el.__onClick__);
   }
 };
 
diff --git a/src/views/custom-instruction/test-instruction/test-instruction.vue b/src/views/custom-instruction/test-instruction/test-instruction.vue
index 16352b5..2a393a1 100644
--- a/src/views/custom-instruction/test-instruction/test-instruction.vue
+++ b/src/views/custom-instruction/test-instruction/test-instruction.vue
@@ -1,9 +1,18 @@
 <template>
   <div class="dc-page">
-    <div v-custom="'red'">文字变色</div>
+    <button v-custom="getFun" :goodsId="goodsId">文字变色</button>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const goodsId = ref(100);
+setTimeout(() => {
+  goodsId.value = 200;
+}, 1000);
+
+const getFun = (e: any) => {
+  console.log("点击事件", e);
+};
+</script>
 
 <style lang="scss" scoped></style>