Vue3中埋点指令封装详解
更新时间:2023年08月01日 15:34:43 作者:乐嫣
对于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埋点指令封装的资料请关注脚本之家其它相关文章!
相关文章
基于Vue+Openlayer实现动态加载geojson的方法
本文通过实例代码给大家介绍基于Vue+Openlayer实现动态加载geojson的方法,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2021-09-09vue+axios实现文件下载及vue中使用axios的实例
这篇文章主要介绍了vue+axios实现文件下载及vue中使用axios的实例,需要的朋友可以参考下2018-09-09vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式
这篇文章主要介绍了vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06
最新评论