您好,登錄后才能下訂單哦!
這篇“vue3中怎么自定義指令實(shí)現(xiàn)按鈕防抖”文章的知識點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“vue3中怎么自定義指令實(shí)現(xiàn)按鈕防抖”文章吧。
監(jiān)聽按鈕的點(diǎn)擊事件
給點(diǎn)擊事件設(shè)置防抖,如果特定時間段內(nèi)多次提交,則每以最后一次重新計(jì)算時間。
1. 在directives文件夾下新建一個文件
preReClick.js內(nèi)容如下:主要是利用防抖控制按鈕是否可用
export default (app) => { app.directive('preReClick', { mounted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true; setTimeout(() => { el.disabled = false; }, binding.value || 2000) } }) } }) }
2. 在main.js中引入指令文件
import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // import myPlugin from './plugins/myPlugin' import showTip from './directives/showTip.js'; import preReClick from './directives/preReClick.js'; const app = createApp(App); app.directive('show-tip', showTip); app.use(ElementPlus).use(preReClick).mount('#app');
組件中使用
引入完成之后就可以在組件中使用v-preReClick。
<template> <div class="test-wrapper"> <div class="test-value"> <el-tooltip placement="top" :content="name">{{name}}</el-tooltip> </div> <button @click="confirm" v-preReClick>點(diǎn)我點(diǎn)我</button> </div> </template> <script setup> const name = '這是一段一段一段一段一段非常非常非常非常長長的文本'; const confirm = () => { console.log('觸發(fā)了按鈕點(diǎn)擊事件'); } </script> <style scoped> .test-value { width: 100%; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style>
效果如下: 在2s時間內(nèi),多次點(diǎn)擊按鈕只打印了一次信息。
以上就是關(guān)于“vue3中怎么自定義指令實(shí)現(xiàn)按鈕防抖”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。