这篇“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时间内，多次点击按钮只打印了一次信息。