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'

這樣就實現了埋點的功能。各位大牛要有更好的方式，歡迎留言交流