1. 监听所有按钮（方案1）
在app.vue中监听所有点击事件，在对应的按钮上面添加每个按钮对应的code和编码，如果是符合要求的点击就触发日志接口传递code和编码过去。
app.vue
mounted() {window.addEventListener("mousedown", (res) => {console.log("当前点击的按钮，类型为：",res.target.getAttribute("actionType"));console.log("当前点击的按钮，编码为：",res.target.getAttribute("actionCode"));//下面开始执行请求，传递参数给后端});}
组件中，xx.vue
<span class="bd-title color-title" actionType="add" actionCode="1">新增</span>
2.自定义指令
给不同的按钮添加不同的标识，在触发自定义指令的时候，挂载监听事件
xxx.vue
<span actionType="add"actionCode="1"v-track="{triggerType: 'click',currentUrl: $route.path,businessCode: 19,actionType: '点击新增按钮',}">新增</span>
gloabelDirective.js
export default {install(Vue) {// 自定义埋点指令Vue.directive('track', {//钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置/** el:指令所绑定的元素，可以用来直接操作 DOM* binding：一个对象，包含以下 property:* name：指令名，不包括 v- 前缀。* value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。* expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。* arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。* modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。* vnode：Vue 编译生成的虚拟节点*/bind: (el, binding, vnode) => {if (binding.value) {//这里参数是根据自己业务可以自己定义需要什么参数就自己定义let params = {//路由currentUrl: binding.value.currentUrl,//操作类型actionType: binding.value.actionType,//埋点类型（浏览类型还是点击类型）frontTriggerType: binding.value.triggerType,//业务代码businessCode: binding.value.businessCode,//触发埋点时间time: binding.value.time,}//如果是浏览类型，直接保存if (binding.value.triggerType == 'browse') {console.log(params, "浏览了");//调用后台接口保存数据params为入参} else if (binding.value.triggerType == 'click') {//如果是click类型，监听click事件el.addEventListener('click', (event) => {//调用后台接口保存数据params为入参console.log(event, params, "点击了");}, false)}}}})}}
