主要通过自定义指令实现,通过使用自定义指令来拦截点击事件,从而收集按钮的一些属性存起来然后到一定数量时候请求后端
<el-button id="btn" type="info" v-trackClick>测试</el-button>
// main.js
let trackData = [];
Vue.directive("trackClick", {
bind(el, binding) {
// 指令绑定时的逻辑
el.addEventListener("click", () => {
const buttonInfo = {
buttonId: el.id,
buttonText: el.innerText,
timestamp: new Date(),
};
// 处理数据的逻辑
// ...
data.push(buttonInfo);
sessionStorage.setItem("track_data", JSON.stringify(trackData));
checkTrackData();
});
},
});
function checkTrackData() {
let data = JSON.parse(sessionStorage.getItem("track_data")) || [];
if (data.length >= 50) {
// 发请求
trackData = [];
sessionStorage.setItem("track_data", trackData);
}
}