这篇“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中怎么自定义指令实现按钮防抖”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。