当前位置: 首页 > news >正文

Vue自定义防重复点击指令(v-repeatClick)

 !!!Vue防抖节流方法:VUE使用节流和防抖_vue防抖节流_停留的章小鱼的博客-CSDN博客

新建js文件directive.js:

// directive.js
// 防重复点击(指令实现)
//使用: 在需要的按钮中加 v-repeatClick 指令即可 <el-button v-repeatClick @click="clickHandle">保存</el-button>
export default {install(Vue) {Vue.directive('repeatClick', {inserted(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 1500)}})},})},
}

全局引入main.js文件:

import directive from '@/utils/directive';
Vue.use(directive);

页面使用:

<el-button v-repeatClick @click="clickHandle">保存</el-button>

http://www.lryc.cn/news/109466.html

相关文章:

  • 高频高速板行业现状及市场前景
  • 【练手】自定义注解+AOP
  • QComboBox添加样式后,编辑栏背景一直白色问题解决方法。
  • vue动态绑定多个class以及带上三元运算或其他条件
  • Rpc原理
  • yapi容器化docker部署以及mongodb容器的持久化挂载异常问题
  • MyBatis-XML映射文件
  • C++类和对象入门(下)
  • 安卓:实现复制粘贴功能
  • jenkins pipeline项目
  • 机器学习笔记 - YOLO-NAS 最高效的目标检测算法之一
  • Grafana集成prometheus(3.Grafana添加promethus数据)
  • flutter开发实战-实现首页分类目录入口切换功能
  • 基于粒子群改进BP神经网络的时间序列预测,pso-bp时间序列预测
  • std::string和std::wstring无法前向声明
  • 论文阅读-Neighbor Contrastive Learning on Learnable Graph Augmentation(AAAI2023)
  • PostgreSql 进程及内存结构
  • Elasticsearch 常用 HTTP 接口
  • games106 homework1实现
  • Pytorch使用VGG16模型进行预测猫狗二分类
  • 安装nvm使用nvm管理node切换npm镜像后使用vue ui管理构建项目成功
  • 在线LaTeX公式编辑器编辑公式
  • 【C、C++】学习0
  • python GUI nicegui初识一(登录界面创建)
  • 【单片机】51单片机串口的收发实验,串口程序
  • 【bug】记录一次使用Swiper插件时loop属性和slidersPerView属性冲突问题
  • 云原生应用里的服务发现
  • 【零基础学Rust | 基础系列 | 基础语法】变量,数据类型,运算符,控制流
  • 运输层---概述
  • 高速公路巡检无人机,为何成为公路巡检的主流工具