Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'提交spm作业' #22

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+57 −14
Open

'提交spm作业' #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,36 @@
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- <div id="big">
<div id="center">
<div id="small"></div>
</div>
</div> -->

<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->

</body>

<!-- <script>
var big = document.querySelector('#big')
var center = document.querySelector('#center')
var small = document.querySelector('#small')
big.onclick = function (e) {
console.log('big');
console.log(e.target);

}
center.onclick = function () {
console.log('center');

}
small.onclick = function () {
console.log('small');

}
</script> -->

</html>
43 changes: 30 additions & 13 deletions src/components/HelloWorld.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,42 @@
<template>
<div class="hello" data-spma="aa">
<span>show spm:{{spmText}}</span>
<div data-spmb="bb">
<button data-spmc="cc">Click it</button>
<div class="hello" data-spm="aa" @click="collectInfo">
<span>show spm:{{ spmText }}</span>
<div data-spm="bb">
<button data-spm="cc">Click it</button>
</div>
<div data-spmb="dd">
<button data-spmc="ff">Click it</button>
<div data-spm="dd">
<button data-spm="ff">Click it</button>
</div>
</div>
</template>

<script>
// TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
// TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：
//考虑一下如果一个页面中有很多按钮，需要如何处理
export default {
name: 'HelloWorld',
data: ()=>{
name: "HelloWorld",
data: () => {
return {
spmText: 'xx.xx.xx'
}
}
}
spmText: "xx.xx.xx",
};
},
methods: {
collectInfo(e) {
let result = "";
let root = e.currentTarget;
let temp = e.target;
let rootSpm = root.dataset.spm;

while (temp !== root) {
if (temp && temp.dataset && temp.dataset.spm) {
result = temp.dataset.spm + (result ? "." + result : result);
}
temp = temp.parentNode;
}
this.spmText = result ? rootSpm + "." + result : rootSpm;
},
},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
Expand Down