vue指令模式 添加埋点

埋点也叫浏览足迹，有多种类型，如浏览页面、点击、搜索等等。

我使用Vue的自定义指令来添加埋点，使用起来比较简单方便，下面是我的代码

Dom代码：

<div class="main" v-track="{act:'browse'}">
</div>

<el-button v-track="{act:'click'}">Test</el-button>

指令代码：

import Vue from 'vue'
// 埋点指令
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
      }
    }
  }
})

最后请不要忘了在main.js中将指令导入

import './directive/track'

这样就实现了埋点的功能。各位大牛要有更好的方式，欢迎留言交流