前端vue自定义指令（directive）实现数据埋点

1.创建自定义指令

（1）在src文件夹下面创建文件夹存放自定义指令的js文件

（2）在新建的文件夹下创建track.js（名字自己随便起的）文件

以下是track.js文件里面的自定义指令的代码

import Vue from 'vue'
// 自定义埋点指令
Vue.directive('track', {
    //钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    /*
     * el:指令所绑定的元素，可以用来直接操作 DOM
     * binding：一个对象，包含以下 property:
     *   name：指令名，不包括 v- 前缀。
     *   value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
     *   expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
     *   arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
     *   modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
     * vnode：Vue 编译生成的虚拟节点
     */
    bind: (el, binding, vnode) => {
        if (binding.value) {
            //这里参数是根据自己业务可以自己定义需要什么参数就自己定义
            let params = {
                //路由
                currentUrl: binding.value.currentUrl,
                //举止在浏览什么根据浏览什么自己写的返回值
                actionType: binding.value.actionType,
                //埋点类型（浏览类型还是点击类型）
                frontTriggerType: binding.value.triggerType,
                //业务代码
                businessCode: binding.value.businessCode,
                //触发埋点时间
                time: binding.value.time,

            }
            //如果是浏览类型，直接保存
            if (binding.value.triggerType == 'browse') {
                console.log(params, "浏览了");
                //调用后台接口保存数据params为入参
            } else if (binding.value.triggerType == 'click') {
                //如果是click类型，监听click事件
                el.addEventListener('click', (event) => {
                    //调用后台接口保存数据params为入参
                    console.log(event, params, "点击了");
                }, false)
            }

        }
    }
})

现在已经创建完成一个浏览 点击埋点的指令

2.使用创建好的自定义埋点指令

（1）在main.js文件中引入track.js文件

//common是我自己创建存放自定义指令的文件夹
import './common/track'

（2）在页面使用自定的埋点指令

<div>
        <div v-track="{triggerType:'browse',currentUrl: $route.path,actionType:'浏览商品功能',businessCode: 19}">商品</div>
        <a id="exportExcel"></a>
        <el-button v-track="{triggerType:'click',currentUrl: $route.path,businessCode: 19,actionType:'点击导出按钮'}"
            class="button" @click="btnExportClick(excelData)">导出Excel</el-button>
    </div>

已经完成了埋点

注意：浏览埋点可以加一个定时器，浏览多长时间才算是有效的浏览埋点事件（根据实际业务调整）

 if (binding.value.triggerType == 'browse') {
                setTimeout(() => {
                    console.log(params, "浏览了5秒钟才开始触发");
                    //调用后台接口保存数据params为入参
                }, 5000);
            }