Vue3中埋點(diǎn)指令封裝詳解

更新時(shí)間：2023年08月01日 15:34:43 作者：樂嫣

對(duì)于Vue項(xiàng)目來說，如果遇到一個(gè)埋點(diǎn)的需求，我們最好的解決方案就是封裝一個(gè)指令，所以本文就來和大家詳細(xì)講講具體是如何封裝埋點(diǎn)指令的吧

前言

對(duì)于Vue項(xiàng)目來說，如果遇到一個(gè)埋點(diǎn)的需求，我們最好的解決方案就是封裝一個(gè)指令，然后再有埋點(diǎn)需求的地方使用，接下來就來封裝一個(gè)埋點(diǎn)指令吧。

代碼實(shí)現(xiàn)

track.ts文件

import HttpAxios from '@/utils/axios'
?
//定義埋點(diǎn)請(qǐng)求
export function track(params) {
 ?return HttpAxios.post(
 ? ?'http://xxxxxx.xxxxx',
 ? ?params,
 ?  {
 ? ? ?isCloseLoading: true
 ?  }
  )
}
?
export default {
 ?install(Vue, options) {
 ? ?options = options || {}
 ? ?/**
 ? ? * 格式化綁定到dom上的數(shù)據(jù)
 ? ? * @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 //指令綁定的數(shù)據(jù)
 ? ? ?  }
 ? ? ? ?el.addEventListener(format.eventMode, e => {
 ? ? ? ? ?try {
 ? ? ? ? ? ?if ('callback' in options && options.callback instanceof Function) {
 ? ? ? ? ? ? ?options.callback(params)
 ? ? ? ? ?  } else {
 ? ? ? ? ? ? ?// 若未定義回調(diào)函數(shù)，則默認(rèn)調(diào)用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文件

// 引入埋點(diǎn)
import VTrack from '@monorepo/shared/utils/track'
?
// 創(chuàng)建vue實(shí)例
const app = createApp(App)
?
// 1.掛載埋點(diǎn),沒有回調(diào)函數(shù)的方式
app.use(VTrack, { systemName: '基礎(chǔ)平臺(tái)', debug: false })
?
// 2.掛載埋點(diǎn),回調(diào)函數(shù)的方式
app.use(VTrack, {
 ?callback(data, e) {
 ? ?//可以自定義埋點(diǎn)請(qǐng)求
 ? ?console.log(data, e);
  },
 ?systemName: '基礎(chǔ)平臺(tái)',
 ?debug: false,
});

使用：

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

關(guān)于指令項(xiàng)目規(guī)范化

在src目錄下，創(chuàng)建directives文件夾存放該項(xiàng)目所需的指令，如圖所示：

index.ts文件統(tǒng)一注冊(cè)指令：

import type { App } from 'vue'
import { hasRole } from './permission/hasRole'
import { hasPermi } from './permission/hasPermi'
?
/**
 * 導(dǎo)出指令：v-xxx
 * @methods hasRole 用戶權(quán)限，用法: v-hasRole
 * @methods hasPermi 按鈕權(quán)限，用法: v-hasPermi
 */
export const setupAuth = (app: App<Element>) => {
 ?hasRole(app)
 ?hasPermi(app)
}

main.ts文件

// 指令
import * as directives from '@/directives'
?
// 創(chuàng)建vue實(shí)例
const app = createApp(App)
?
// 注冊(cè)指令
for (const key in directives) {
 ?directives[key](app)
}

以上就是Vue3中埋點(diǎn)指令封裝詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3埋點(diǎn)指令封裝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: