快捷導(dǎo)航

Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼

更新時(shí)間：2023年02月13日 10:26:44 作者：天渺工作室

某些應(yīng)用場景會給點(diǎn)擊事件添加權(quán)限，不存在權(quán)限就攔截點(diǎn)擊事件，有權(quán)限就繼續(xù)正常觸發(fā)點(diǎn)擊事件。這樣的效果是如何實(shí)現(xiàn)的呢，本文就來和大家詳細(xì)講講

問題

某些應(yīng)用場景會給點(diǎn)擊事件添加權(quán)限，不存在權(quán)限就攔截點(diǎn)擊事件（或觸發(fā)其他業(yè)務(wù)事件），有權(quán)限就繼續(xù)正常觸發(fā) 點(diǎn)擊事件。如果用封裝組件的方法，在使用三方UI庫的情況下，封裝成本過大，并不劃算。

解決方案案例

邏輯

main.ts

// main.ts // 舉例案例 直接在初始化為全局自定義指令
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router/router";
import * as echarts from 'echarts';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(router);
app.use(ElementPlus)

// 邏輯封裝
const customClick = (binding: any) => {
    return () =>{
        if (true) { // 判斷條件
            // 正常觸發(fā)點(diǎn)擊事件
            binding.value();
        } else {
            // 已經(jīng)成功攔截點(diǎn)擊事件
            console.log('已經(jīng)成功攔截點(diǎn)擊事件');
        };
    };
};
// 全局自定義指令
app.directive('custom',{
    created(el, binding, vnode, prevVnode) {
        el.addEventListener('click', customClick(binding));
    },
    // 離開一定要銷毀卸載
    unmounted(el, binding, vnode) {
        el.removeEventListener('click', customClick);
    },
});

app.mount("#app");

頁面中的使用

<template>
<!--函數(shù)不帶括號-->
<button v-custom="onClick">test按鈕</button>
<el-button type="primary" v-custom="onClickTest1">Primary</el-button>

<!--函數(shù)帶括號 可傳值-->
<button v-custom="() => onClick()">test按鈕</button>
<el-button type="primary" v-custom="() => onClickTest1(233)">Primary</el-button>
</template>

<script lang="ts" setup >
const onClick = () => {
    console.log('_____函數(shù)不帶括號');
};

const onClickTest1 = (num: number) => {
    console.log('_____函數(shù)帶括號 可傳值');
};
</script>

邏輯封裝還存在優(yōu)化點(diǎn),后續(xù)在持續(xù)優(yōu)化。

到此這篇關(guān)于Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼的文章就介紹到這了,更多相關(guān)Vue3自定義指令攔截點(diǎn)擊事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: