vue中使用指令给按钮添加节流

一、在utils中封装节流函数

import Vue from 'vue'const preventReClick = Vue.directive('preventReClick', {inserted: function (el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 4000)}})}
});export { preventReClick }

二、在main.js中引入

import preventReClick from '@/utils/preventReClick.js'

三、在组件中使用

vue中使用指令给按钮添加节流相关推荐

vue中v-on指令的使用之Vue知识点归纳(四)
本文章中描述 v-on 指令的基本使用点击按钮动态修改数据 1 简述 vue 中 v-on 指令简单点来讲,是用来给元素设置绑定事件. 格式 v-on:事件名称="方法名称" 这 ...
vue中使用指令解决iphonex底部的适配问题
vue中使用指令解决iphonex底部的适配问题 1.全局自动化加载指令 1.1 在src新建directives文件夹,并且新建index.js 1.2 在main.js引入directives/i ...
vue中v-model指令的使用之Vue知识点归纳(九)
本文中描述 vue 中 v-model 指令的基本使用 1 简述 vue 中 v-model 用来获取和设置表单中的值 2 案例 <!DOCTYPE html> <html lan ...
vue中v-bind指令的使用之Vue知识点归纳(七)
本文中描述 vue 中 v-bind 指令的基本使用 1 简述 vue 中 v-bind 用来操作 html 元素标签中的属性 2 案例 <!DOCTYPE html> <html ...
vue中v-if指令的使用之Vue知识点归纳(六)
本文章描述 vue 中 v-if 的基本使用 vue 中 v-show 与 v-if 的区别 1 简述 vue 中 v-if 指令,顾名思义是用来进行条件判断的,直接操作 dom 2 案例 <! ...
js中for(const i in/of arr/obj)和vue中v-for指令的区别
在js中 var obj = {q:'qqq',w:'www',e:'eee'}var arr1 = [{r:'rrr'},{t:'ttt'},{y:'yyy'}]var arr2 = ['uuu', ...
Vue 中实现点击按钮
在 Vue 中实现点击按钮复制功能: 因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太 ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
教女朋友学习 vue中的指令及其自定义指令
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...

vue中使用指令给按钮添加节流

vue中使用指令给按钮添加节流相关推荐

最新文章

热门文章