關(guān)于vue表單提交防雙/多擊的例子
更新時(shí)間：2019年10月31日 08:38:42 作者：風(fēng)翻火焰
今天小編就為大家分享一篇關(guān)于vue表單提交防雙/多擊的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
先說(shuō)下出現(xiàn)場(chǎng)景：
測(cè)試這次比較極端(也有可能是測(cè)試又學(xué)會(huì)什么新知識(shí)了，哈哈)，說(shuō)是在點(diǎn)擊提交和調(diào)用之間有可能有狂暴的用戶在多連擊，就像打游戲一樣，調(diào)用接口后的loading狀態(tài)切換就無(wú)效了
然后，就只好自己寫了個(gè)基于vue防多擊的指令,小小偷懶了下，我里面已經(jīng)注入fastClick了，因此響應(yīng)方法是極快的，因此只需要稍微控制下二次點(diǎn)擊的時(shí)間即可
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>
以上這篇關(guān)于vue表單提交防雙/多擊的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue子組件設(shè)計(jì)provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計(jì)provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)密碼顯示隱藏切換功能,需要的朋友可以參考下2018-02-02
vue3(vite)設(shè)置代理封裝axios api解耦功能
這篇文章主要介紹了vue3（vite）設(shè)置代理封裝axios api解耦,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue中JS動(dòng)畫與Velocity.js的結(jié)合使用
這篇文章主要介紹了Vue中JS動(dòng)畫與Velocity.js的結(jié)合使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
最近開(kāi)發(fā)遇到一個(gè)點(diǎn)擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11
Fragment 是 Vue 3 中的新特性,允許一個(gè)組件模板返回多個(gè)根節(jié)點(diǎn),與傳統(tǒng)方式不同,不再需要一個(gè)額外的 DOM 元素來(lái)包裹所有內(nèi)容,本文將詳細(xì)介紹 Fragment 的概念、使用場(chǎng)景、優(yōu)點(diǎn)以及可能遇到的問(wèn)題,需要的朋友可以參考下2024-08-08
vue-cli系列之vue-cli-service整體架構(gòu)淺析
這篇文章主要介紹了vue-cli系列之vue-cli-service整體架構(gòu)淺析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
elementUI Pagination 分頁(yè)指定最大頁(yè)的問(wèn)題及解決方法(page-count)
項(xiàng)目中遇到數(shù)據(jù)量大,查詢的字段多,但用戶主要使用的是最近的一些數(shù)據(jù),1萬(wàn)條以后的數(shù)據(jù)一般不使用,這篇文章主要介紹了elementUI Pagination 分頁(yè)指定最大頁(yè)的問(wèn)題及解決方法(page-count),需要的朋友可以參考下2024-08-08
這篇文章主要給大家介紹了關(guān)于Vue事件修飾符native、self的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07