vue3中怎么自定義指令實現按鈕防抖

這篇“vue3中怎么自定義指令實現按鈕防抖”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue3中怎么自定義指令實現按鈕防抖”文章吧。

自定義指令實現按鈕防抖

實現思路

• 監聽按鈕的點擊事件

• 給點擊事件設置防抖，如果特定時間段內多次提交，則每以最后一次重新計算時間。

代碼實現

1. 在directives文件夾下新建一個文件

preReClick.js內容如下：主要是利用防抖控制按鈕是否可用

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>點我點我</button>
  </div>
</template>
<script setup>
const name = '這是一段一段一段一段一段非常非常非常非常長長的文本';

const confirm = () => {
  console.log('觸發了按鈕點擊事件');
}
</script>
<style scoped>
.test-value {
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>

效果如下： 在2s時間內，多次點擊按鈕只打印了一次信息。

以上就是關于“vue3中怎么自定義指令實現按鈕防抖”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。