vue3埋点逻辑与业务逻辑区分

48 阅读1分钟

src目录创建一个directive文件夹,新建index.js

import clickBurialPoint from './clickBurialPoint'
export default function customDirectives(app) {
    clickBurialPoint(app)
}

分模块创建自定义指令,创建clickBurialPoint.js

export default function (app) {
    app.directive('trackClick', {
        mounted(el, binding, vnode) {
            el.addEventListener('click', () => {
                // 执行埋点逻辑
                console.log('Track event:', binding.value);
            });
        },
        unmounted(el) {
            el.removeEventListener('click');
        }
    })
}

在main.js文件引入

...
import customDirectives from './directive'
...
const app = createApp(App)
registerDirectives(app)
...

使用

<el-button v-trackClick="'埋点逻辑'">埋点</el-button>