[JavaScript知识库]vue前端添加埋点事件

新建一个track .js 文件，并写入以下内容

import Vue from 'vue'
// 埋点指令
let track = Vue.directive('track', {
  bind: (el, binding, vnode) => {
    console.log(el)
    console.log(binding)
    console.log(vnode)
    if (binding.value && binding.value.act) {
      switch (binding.value.act) {
        case 'browse':
              // 在此插入埋点数据(调用API)
              console.log('browse')
          break
        case 'click':
          el.onclick = function () {
              // 在此插入埋点数据(调用API)
              console.log('click')
          }
          break
      }
    }
  }
})
export default track

src\main.js加入以下代码

import track from './components/track.js'
Vue.prototype.$track = track;

在需要埋点的单文件相应地方加入

<div v-track="{act:'browse'}"><span>浏览日志埋点</span></div>