首页 > 其他分享 >前端防抖-通过自定义指令实现

前端防抖-通过自定义指令实现

时间:2024-02-23 22:56:11浏览次数:25  
标签:el 防抖 自定义 前端 disabled 指令

前端防抖-通过自定义指令实现

1、通过自定义事件实现前端防抖

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

2、在按钮上应用

<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-preventReClick>确 认</el-button>

标签:el,防抖,自定义,前端,disabled,指令
From: https://www.cnblogs.com/ldy731729142/p/18030513

相关文章

  • Unity编辑器扩展秘籍-利用EditorApplication.contextualPropertyMenu为右键菜单增加自
    假设我们希望为材质右键弹出按钮增加新的功能,应该怎么做呢我们可以通过注册EditorApplication.contextualPropertyMenu全局回调方法,增加自定义的MenuItemusingUnityEditor;usingUnityEngine;namespaceYaojz{[InitializeOnLoad]publicstaticclassMaterialC......
  • 英文指令增强
    (不指定研究领域)Pleasepolishmyreserachpapertomakeitmoreconcise,readable,andengaging.Ineedhelpwitheaditing,proofreading,andmakinganynecessaryimprovementstothelanguageandgrammar.Iamlookingtoimprovetheoverallqualityofmypaperand......
  • docker 自定义网络
    docker的网络分为:单主机、跨主机这篇先说:单主机我们先说一下docker的原生网络模式网络模式简介优点使用场景none空网络,没有网络此网络与外界隔离,安全度非常高适合公司内部生产密钥host容器与宿主机共享namespace直接使用宿主机的网络,网络性能方面最好。......
  • 自定义QComboBox解决QCombobox设置样式并与QDateTime一起使用时候弹出选项乱跳
    头文件:#pragmaonce#include<QToolButton>#include<QListView>#include<QWidgetAction>#include<QPushButton>#include<QHBoxLayout>#include<QMenu>#include<QStandardItemModel>#include<qdebug.h>classCustomCo......
  • k8s prometheus监控自定义exporter接口
    案例1:我有的k8s中所有pod应用资源监控接口是/actuator/prometheus,但是默认prometheus监控的是/metrics,这是需要修改prometheus-server的configmap,修改抓取资源监控的api接口需要找到kubernetes-service-endpoints这一项,然后找到action:replace,然后添加replacement案例2:如果......
  • 如何自定义配置
    IConfigurationSource  build()方法IConfigurationProvider1usingCSRedis;2usingMicrosoft.Extensions.Configuration;3usingMicrosoft.Extensions.Primitives;4usingSystem;5usingSystem.Collections.Generic;6usingSystem.Text;78namespac......
  • Angular Material 17+ 高级教程 – Custom Themes (自定义主题) for Material Design
    前言AngularMaterialv17.2.0发布了MaterialDesign3Theme   上一篇 AngularMaterial17+高级教程–GetStarted下一篇TODO想查看目录,请移步 Angular17+高级教程–目录......
  • 引入JavaScript自定义提示信息(账户密码不为空,必须勾选用户协议)
     当不输入用户或密码就登录时不勾选用户协议就登录时form表单的修改,引入了onsubmit控件,提交表单时,调用validateForm函数<formaction="/home"method="post"onsubmit="returnvalidateForm()">validateForm函数内容functionvalidateForm(){//验证用户名和密......
  • 迪文屏TA指令开发_开机动画
    迪文屏TA指令开发_开机动画1.新建项目新建一个空白文件夹,点击新建工程之后选择新建文件夹地址即可创建完成之后,文件夹结构如下:2.导入背景图片素材说是设置开机动画,实际上是通过多个背景图片的连续播放实现的动画效果点击加号键,可以直接选中所有的背景图片素材进行一键导......
  • FastReport调用自定义方法
     在FastReport内部写一个方法,如果直接写入数值,可以被调用成功。 这种情况可以被正常调用。 但是在使用传递进来的变量,就会说不正确。类似:[SecondToString([Table1.Error_TimeTotal])],这种,就是不行。解决办法,使用事件处理,注意,要使用AfterData。方法如上图。 ......