1. 自定义指令
import Vue from '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,
behavior:binding.value.behavior,
service:'xxx',
}
//如果是浏览类型，直接保存
if (binding.value.triggerType == 'browse'){
//调用后台接口保存数据
api.eventTrack.saveEventTrack(params);
} else if (binding.value.triggerType == 'click'){
//如果是click类型，监听click事件
el.addEventListener('click', (event) => {
//调用后台接口保存数据
api.eventTrack.saveEventTrack(params);
}, false)
}
}
}
})
2.需要再main.js中引入
import './directive/track'
3.在需要添加埋点的标签上添加自定义指令就可以
如果是浏览类型记录，triggerType写为browse
<div class="app-online-list" v-track="{triggerType:'browse',currentUrl: $route.path,behavior:'浏览xxx功能',businessCode: 19,actionType:'xxx-view'}">
</div>
如果记录点击事件，triggerType写为click
<div class="app-online-list" v-track="{triggerType:'click',currentUrl: $route.path,behavior:'点击xxx按钮',businessCode: 19,actionType:'xxx-click'}">
</div>
