您现在的位置是:网站首页> 编程资料编程资料
Vue中的全局指令防止按钮重复点击_vue.js_
2023-05-24
368人已围观
简介 Vue中的全局指令防止按钮重复点击_vue.js_
全局指令防止按钮重复点击
1.common.js
首先引入Vue
import Vue from 'vue'; const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 3000) } console.log(el.disabled) }) } }); export { preventReClick }2.在需要引入的页面引入(**.vue)
在按钮上添加v-preventReClick
确定
从common.js导入指令preventReClick
import preventReClick from '../common' //防多次点击,重复提交
防重复点击(vue指令实现)
阻止快速点击按钮会重复多次调用接口的
定义全局指令
// directive.js export default { install (Vue) { // 防重复点击(指令实现) Vue.directive('repeatClick', { inserted (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 1000) } }) } }) } }在main.js引用
import directive from 'directive.js'; vue.use(directive );
按钮调用直接加v-preventReClick
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 使用idea创建vue项目的图文教程_vue.js_
- 关于Vue 3.0引入百度地图不兼容的解决办法_vue.js_
- vue+elementUl导入文件方式(判断文件格式)_vue.js_
- react实现移动端二级路由嵌套详解_React_
- elementui+vue+axios实现文件上传本地服务器_vue.js_
- 可能是vue中使用axios最详细教程_vue.js_
- vue开发移动端h5环境搭建的全过程_vue.js_
- node.js连接mongoose数据库方法详解_node.js_
- Vue+Axios实现文件上传自定义进度条_vue.js_
- vue3.0引入百度地图并标记点的实现代码_vue.js_
