zoukankan      html  css  js  c++  java
  • vue3.0 中防止按钮多次提交

    vue3.0 中防止按钮多次提交

     

    import { createApp } from 'vue'
    import indexApp from './App.vue'
    const app = createApp(indexApp)
    /**
    @方法名:directive(vue,内置)
    @来源:Winford.Wang|2021-09-16,17:45
    @参数:
    @描述:用于防止多次点击保存效果,仅用于button
    **/
    app.directive('preventReClick', (el, binding) => {
      function preventReClickFun(elValue, bindingValue) {
        if (!elValue.disabled) {
          elValue.disabled = true
          setTimeout(() => {
            elValue.disabled = false
          }, bindingValue.value || 3000)
        }
      }
      el.addEventListener('click', () => preventReClickFun(el, binding))
      binding.dir.unmounted = function() {
        el.removeEventListener('click', () => preventReClickFun(el, binding))
      }
    });
    
    // 使用
    <el-button type="warning" v-preventReClick>单击按钮</el-button>
    转载标明来路-博客园, 联系方式1763907618@qq.com
  • 相关阅读:
    java三种实现线程的方法比较
    java基础
    java闭包
    android 设置textview跑马灯效果
    android控制系统音量
    android 查找某个特定文件后缀名
    android 歌词解析
    textview滑动效果
    puporwindow
    android 网络通讯
  • 原文地址:https://www.cnblogs.com/wangyongping/p/15303829.html
Copyright © 2011-2022 走看看