vue3自定义指令实现按钮防抖示例详解

时间:2023-03-23 元子不圆呀人气:0

写在前面

在实际项目开发过程中，对于按钮的提交事件来说，我们需要限制按钮重复点击，避免在某个时间内重复提交。这时候我们一般用到事件的防抖，也就是说在规定时间连续多次触发事件，回调函数只会执行最近的一次。但是如果在每个组件的按钮中都添加防抖代码，相当于是复制粘贴，增加代码量，我们这篇文章主要就是介绍使用自定义指令设置按钮防抖，这样按钮需要使用的时候就只用写一个指令了。

自定义指令实现按钮防抖

实现思路

监听按钮的点击事件
给点击事件设置防抖，如果特定时间段内多次提交，则每以最后一次重新计算时间。

代码实现

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

总结

给按钮设置防抖防止多次提交请求不论对于用户体验还是后端服务请求的压力等，都是很有必要的，使用自定义指令可以更好的维护代码，减少代码量。

加载全部内容