vue自定义指令实现数据埋点

唐生洗发用飘柔

已于 2022-08-03 09:42:26 修改

阅读量940

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 vue

于 2022-07-12 17:38:26 首次发布

本文链接：https://blog.csdn.net/lys1925/article/details/125747924

本文介绍了如何在Vue应用中使用自定义指令`tracking`，结合debounce防抖技术，实现点击事件后的后台数据追踪，同时通过`$tracking`方法简化调用。展示了如何安装指令并正确使用在HTML元素上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.埋点指令

import { debounce, eventTrack } from "../utils/common"

const install = function (Vue) {

  const INTERVAL = 300;
  Vue.directive('tracking', {
    bind(el, binding) {
      el.addEventListener('click', debounce(function () {
          //调用后台接口保存数据
        eventTrack(binding.value)
      }, INTERVAL)
        , false)
    }
  })

  Vue.prototype.$tracking = function (dictCode) {
    debounce(function (dictCode) {
        eventTrack(dictCode)
    }, INTERVAL)(dictCode)
  }

}
if (window.Vue) {
  Vue.use(install); // eslint-disable-line
}

export default install

2. main.js注册指令

import directive from './directive' // directive

Vue.use(directive)

3.使用方式如下

   <div class="index-tab-item" v-tracking="'shouye:shipingtai'"  @click="handleChange('shi')">
        切换
      </div>

4.扩展debounce防抖和eventTrack请求后台

/**
 * 函数防抖
 */
let  timer = null;
export function debounce(fn, interval = 300) {
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}
//請求接口
export function eventTrack(code) {
  let users = JSON.parse(localStorage.getItem('userinfos'));
  let userInfo = {
    "userId": users.id,
    "userName": users.userName,
    "userRealName": users.realname,
  }
  if (code) {
    eventTracking({
      eventCode: code,
      ...userInfo
    })
  }
}