From c84a83b8f94e8278c40640c8666450e56213de6e Mon Sep 17 00:00:00 2001
From: Congwei Bai <congweibai@gmail.com>
Date: Sat, 27 Aug 2022 21:23:37 +0930
Subject: [PATCH] bind spm text

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

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..3e4114e 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="updateSpmText">
+    <span>show spm:{{ spmText }}</span>
     <div data-spmb="bb">
       <button data-spmc="cc">Click it</button>
     </div>
@@ -14,12 +14,36 @@
 // TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
 export default {
   name: 'HelloWorld',
-  data: ()=>{
+  data: () => {
     return {
-      spmText: 'xx.xx.xx'
-    }
-  }
-}
+      spmText: 'xx.xx.xx',
+    };
+  },
+  methods: {
+    updateSpmText(e) {
+      const buttonNode = e.target;
+      if (e.srcElement.nodeName !== 'BUTTON') return;
+      const spma = this.getSpmValue('data-spma', buttonNode);
+      const spmb = this.getSpmValue('data-spmb', buttonNode);
+      const spmc = buttonNode.getAttribute('data-spmc');
+      this.spmText = [spma, spmb, spmc].join('.');
+    },
+    getSpmValue(attributeName, buttonNode) {
+      const nodeList = document.querySelectorAll('[' + attributeName + ']');
+      if (nodeList.length > 0) {
+        let index = -1;
+        nodeList.forEach((node, i) => {
+          if (node.contains(buttonNode)) {
+            index = i;
+          }
+        });
+        if (index > -1)
+          return nodeList[index].getAttribute(attributeName) || '';
+      }
+      return '';
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->