快捷導(dǎo)航

vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解

更新時(shí)間：2023年02月27日 09:37:10 作者：元子不圓呀

這篇文章主要為大家介紹了vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

寫(xiě)在前面

在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，對(duì)于按鈕的提交事件來(lái)說(shuō)，我們需要限制按鈕重復(fù)點(diǎn)擊，避免在某個(gè)時(shí)間內(nèi)重復(fù)提交。這時(shí)候我們一般用到事件的防抖，也就是說(shuō)在規(guī)定時(shí)間連續(xù)多次觸發(fā)事件，回調(diào)函數(shù)只會(huì)執(zhí)行最近的一次。但是如果在每個(gè)組件的按鈕中都添加防抖代碼，相當(dāng)于是復(fù)制粘貼，增加代碼量，我們這篇文章主要就是介紹使用自定義指令設(shè)置按鈕防抖，這樣按鈕需要使用的時(shí)候就只用寫(xiě)一個(gè)指令了。

自定義指令實(shí)現(xiàn)按鈕防抖

實(shí)現(xiàn)思路

監(jiān)聽(tīng)按鈕的點(diǎn)擊事件
給點(diǎn)擊事件設(shè)置防抖，如果特定時(shí)間段內(nèi)多次提交，則每以最后一次重新計(jì)算時(shí)間。

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

1. 在directives文件夾下新建一個(gè)文件

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 = '這是一段一段一段一段一段非常非常非常非常長(zhǎng)長(zhǎng)的文本';
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時(shí)間內(nèi)，多次點(diǎn)擊按鈕只打印了一次信息。