0
点赞
收藏
分享

微信扫一扫

vue 中防止用户频繁点击按钮

书呆鱼 2021-09-24 阅读 177
  1. 新建js文件,因为是全局可用的,文件可以叫preventRepeatClick.js
export default {

  install (Vue) {

    // 防止重复点击

    Vue.directive('preventReClick', {

      inserted (el, binding) {

          console.log("binding-7",binding)

        el.addEventListener('click', () => {

          if (!el.disabled) {

            el.disabled = true

            setTimeout(() => {

              el.disabled = false

            },binding.value || 1000)
          }
        })
      }
    })
  }
}
  1. 在main.js 里面引入改文件
import preventReClick from './js/preventRepeatClick.js'

Vue.use(preventReClick)
  1. 在触发事件的按钮上值接使用该指令
  <el-button type="primary" v- preventReClick>主要按钮</el-button>
举报

相关推荐

0 条评论