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中怎么自定义指令实现按钮防抖”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。