Vue3埋点指令封装

😎前言：对于Vue项目来说，如果遇到一个埋点的需求，我们最好的解决方案就是封装一个指令，然后再有埋点需求的地方使用，接下来就来封装一个埋点指令吧。👇👇

代码实现

track.ts文件

import HttpAxios from '@/utils/axios'
​
//定义埋点请求
export function track(params) {
  return HttpAxios.post(
    'http://xxxxxx.xxxxx',
    params,
    {
      isCloseLoading: true
    }
  )
}
​
export default {
  install(Vue, options) {
    options = options || {}
    /**
     * 格式化绑定到dom上的数据
     * @param {*} binding
     */
    function formatBinding(binding) {
      let trackData = ''
      let eventMode = 'click'
      if (typeof binding.value === 'object') {
        if ('event' in binding.value) {
          eventMode = binding.value.event
        }
        if ('data' in binding.value) {
          trackData = binding.value.data
        } else {
          trackData = binding.value
        }
      } else {
        trackData = binding.value
      }
      return {
        eventMode,
        trackData
      }
    }
    // 初始化
    if ('init' in options && options.init instanceof Function) {
      try {
        options.init()
      } catch (error) {
        if (options.debug) {
          console.log(error)
        }
      }
    }
    Vue.directive('track', {
      mounted(el, binding) {
        const format = formatBinding(binding)
        el.trackData = format.trackData
        const params = {
          systemName: options.systemName,
          ...el.trackData //指令绑定的数据
        }
        el.addEventListener(format.eventMode, e => {
          try {
            if ('callback' in options && options.callback instanceof Function) {
              options.callback(params)
            } else {
              // 若未定义回调函数，则默认调用track方法
              track(params)
            }
            if (options.debug) {
              console.log(el.trackData)
            }
          } catch (error) {
            if (options.debug) {
              console.log(error)
            }
          }
        })
      },
      update(el, binding) {
        const format = formatBinding(binding)
        el.trackData = format.trackData
      }
    })
  }
}

main.ts文件

// 引入埋点
import VTrack from '@monorepo/shared/utils/track'
​
// 创建vue实例
const app = createApp(App)
​
// 1.挂载埋点,没有回调函数的方式
app.use(VTrack, { systemName: '基础平台', debug: false })
​
// 2.挂载埋点,回调函数的方式
app.use(VTrack, {
  callback(data, e) {
    //可以自定义埋点请求
    console.log(data, e);
  },
  systemName: '基础平台',
  debug: false,
});

使用：

<template>
  <button v-track="{ menuName: '按钮' }">DEBUG</button>
</template>

关于指令项目规范化

在src目录下，创建directives文件夹存放该项目所需的指令，如图所示：

index.ts文件统一注册指令：

import type { App } from 'vue'
import { hasRole } from './permission/hasRole'
import { hasPermi } from './permission/hasPermi'
​
/**
 * 导出指令：v-xxx
 * @methods hasRole 用户权限，用法: v-hasRole
 * @methods hasPermi 按钮权限，用法: v-hasPermi
 */
export const setupAuth = (app: App<Element>) => {
  hasRole(app)
  hasPermi(app)
}

main.ts文件

// 指令
import * as directives from '@/directives'
​
// 创建vue实例
const app = createApp(App)
​
// 注册指令
for (const key in directives) {
  directives[key](app)
}

大功告成🎉🎉🎉