From ccb5ff4cf9fc10e287c89d42e4e093d7d0a909a5 Mon Sep 17 00:00:00 2001
From: xh12 <1960939421@qq.com>
Date: Thu, 25 Aug 2022 19:18:29 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=91=E9=80=9A=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue | 38 ++++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..1a9d137 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="hello" data-spma="aa">
+  <div class="hello" data-spma="aa" @click="clickDivSpam">
     <span>show spm:{{spmText}}</span>
     <div data-spmb="bb">
       <button data-spmc="cc">Click it</button>
@@ -16,9 +16,41 @@ export default {
   name: 'HelloWorld',
   data: ()=>{
     return {
-      spmText: 'xx.xx.xx'
+      spmText: 'xx.xx.xx',
     }
-  }
+  },
+  /** 事件监听无法跑通用例
+  mounted() {
+    const helloNode = document.querySelector('.hello');
+    if (!helloNode) return;
+    helloNode.addEventListener('click', (e) => {
+      const arr = this.findMark(e.target);
+      this.spmText = arr.reverse().join('.')
+    })
+  },
+  beforeUnmount() {
+  },
+   */
+  methods: {
+    clickDivSpam(e) {
+      const arr = this.findMark(e.target);
+      this.spmText = arr.reverse().join('.')
+    },
+    findMark(target, res = []) {
+      const attributes = target.dataset;
+      if (!attributes) return res;
+      for(let k in attributes) {
+        if(k.startsWith('spm')) {
+          res.push(attributes[k]);
+        }
+      }
+
+      if (target.parentNode) {
+        this.findMark(target.parentNode, res);
+      }
+      return res;
+    },
+  },
 }
 </script>