vue指令模式 添加埋点

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

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

Dom代码:

Test

指令代码:

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'

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

你可能感兴趣的:(Vue前端框架)