vue 全局节流 input and button

最新推荐文章于 2023-10-31 11:54:57 发布

原创最新推荐文章于 2023-10-31 11:54:57 发布 · 701 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何在Vue中实现输入框的debounce指令，以减少高频输入事件的处理，并展示了如何使用preventReClick指令防止按钮频繁点击。这两种技术有助于提升用户体验和性能管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、输入框
新建debounce.js文件：
import Vue from 'vue'
Vue.directive('debounce',{
  inserted: function (el, binding) {
    let timer
    el.addEventListener('keyup', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 800)
    })
  }
})
main.js中引入：
import "@/utils/debounce.js"
页面中使用：
<el-input v-model="xxx.xxxxx"  v-debounce="自己的方法名">

2、按钮节流
新建  preventReClick.js 文件:
import Vue from 'vue'
//按钮节流

const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
});

export { preventReClick }

main.js中：
import { preventReClick }from '@/utils/preventReClick'
Vue.prototype.$preventReClick = preventReClick; // 节流函数
使用
<el-button :@click="getCodeMsgBtn" v-preventReClick>按钮</el-button>