vue2，使用directive，自定义埋点指令

使用 directive 来自定义埋点指令

1、新建一个js文件，创建 v-track 自定义指令，这里我放在 src\utils\directive.js

// src\utils\directive.js
import Vue from 'vue'
import Store from '@/store/index.js'

// 自定义埋点指令
Vue.directive('track', {
// 只调用一次，指令第一次绑定到元素时调用。
  bind: (el, binding, vnode) => {
    el.addEventListener('click', (event) => {
      const parameter = binding.value
      // 对获取到的数据进行上报操作，submitXLogInfo是调用接口
      Store.dispatch('submitXLogInfo', parameter)
    })
  }
})

2、引入 directive.js 文件，在 main.js 里添加

// main.js
import appDirective from "./utils/directive.js"

3、使用方式，在组件中添加 v-track 数据：

// vue文件中使用
<a-button
    @click="clickFunc"
    v-track="{'eventType': 'click',
              'actionType': 'action-type-click',
              'behavior': '点击【xxx】按钮',
              'pageUrl': $route.path,
              'logType': 'logType',
              'eventType': 'click'}"
>提交</a-button>