关于vue表单提交防双/多击的例子
更新时间：2019年10月31日 08:38:42 作者：风翻火焰
今天小编就为大家分享一篇关于vue表单提交防双/多击的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
先说下出现场景：
测试这次比较极端(也有可能是测试又学会什么新知识了，哈哈)，说是在点击提交和调用之间有可能有狂暴的用户在多连击，就像打游戏一样，调用接口后的loading状态切换就无效了
然后，就只好自己写了个基于vue防多击的指令,小小偷懒了下，我里面已经注入fastClick了，因此响应方法是极快的，因此只需要稍微控制下二次点击的时间即可
export default {}.install = (Vue, options = {}) => {
Vue.directive('dbClick', {
inserted(el, binding) {
el.addEventListener('click', e => {
if(!el.disabled) {
el.disabled = true;
let timer = setTimeout( () => {
el.disabled = false;
},1000)
}
})
}
})
}
用法：
<pr-col hor="center"><mt-button v-dbClick type="primary" @click="saveOrder">保存</mt-button></pr-col>
以上这篇关于vue表单提交防双/多击的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue子组件设计provide和inject理解及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了vue实现密码显示隐藏切换功能,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue3（vite）设置代理封装axios api解耦,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue中JS动画与Velocity.js的结合使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
vue按住shift键多选方式(以element框架的table为例)
这篇文章主要介绍了vue按住shift键多选方式(以element框架的table为例),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue导入excel文件的两种方式(form表单和el-upload)
最近开发遇到一个点击导入按钮让excel文件数据导入的需求,下面这篇文章主要给大家介绍了关于Vue导入excel文件的两种方式,分别是form表单和el-upload两种方法,需要的朋友可以参考下2022-11-11
Fragment 是 Vue 3 中的新特性,允许一个组件模板返回多个根节点,与传统方式不同,不再需要一个额外的 DOM 元素来包裹所有内容,本文将详细介绍 Fragment 的概念、使用场景、优点以及可能遇到的问题,需要的朋友可以参考下2024-08-08
vue-cli系列之vue-cli-service整体架构浅析
这篇文章主要介绍了vue-cli系列之vue-cli-service整体架构浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
elementUI Pagination 分页指定最大页的问题及解决方法(page-count)
项目中遇到数据量大,查询的字段多,但用户主要使用的是最近的一些数据,1万条以后的数据一般不使用,这篇文章主要介绍了elementUI Pagination 分页指定最大页的问题及解决方法(page-count),需要的朋友可以参考下2024-08-08
这篇文章主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
最新评论