Vue3中埋点指令封装详解
作者：乐嫣
对于Vue项目来说，如果遇到一个埋点的需求，我们最好的解决方案就是封装一个指令，所以本文就来和大家详细讲讲具体是如何封装埋点指令的吧
前言
对于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)
}以上就是Vue3中埋点指令封装详解的详细内容，更多关于Vue3埋点指令封装的资料请关注脚本之家其它相关文章！