From 84d1d9c432cc4d5ea4371c0b4c2dd6967689db35 Mon Sep 17 00:00:00 2001
From: sj-henryxue <shangjian@shangjiandeMacBook-Pro.local>
Date: Wed, 31 Aug 2022 17:03:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue | 44 ++++++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..54dac3f 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="hello" data-spma="aa">
-    <span>show spm:{{spmText}}</span>
+  <div class="hello" data-spma="aa" @click="delegateClickEvent">
+    <span>show spm:{{ spmText }}</span>
     <div data-spmb="bb">
       <button data-spmc="cc">Click it</button>
     </div>
@@ -13,13 +13,41 @@
 <script>
 // TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
 export default {
-  name: 'HelloWorld',
-  data: ()=>{
+  name: "HelloWorld",
+  data: () => {
     return {
-      spmText: 'xx.xx.xx'
-    }
-  }
-}
+      spmText: "xx.xx.xx",
+    };
+  },
+  methods: {
+    delegateClickEvent(e) {
+      // eslint-disable-next-line
+      // debugger;
+      // console.log(e, e.target, e.currentTarget);
+
+      if (!["BUTTON"].includes(e.target.tagName)) return;
+
+      let currEle = e.target;
+      const spm = [],
+        endEle = e.currentTarget.parentElement;
+
+      while (currEle !== endEle) {
+        // 获取第一个spm属性名
+        const spmProp = currEle
+          .getAttributeNames()
+          .find((attr) => attr.startsWith("data-spm"));
+        // 获取spm属性值
+        if (spmProp) {
+          const spmValue = currEle.dataset[spmProp.replace("data-", "")];
+          spm.unshift(spmValue);
+        }
+        currEle = currEle.parentElement;
+      }
+
+      this.spmText = spm.join(".");
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->