Vue中的全局指令防止按鈕重復點擊
更新時間：2022年08月15日 10:13:39 作者：吳小花的博客
這篇文章主要介紹了Vue中的全局指令防止按鈕重復點擊，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
全局指令防止按鈕重復點擊
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
<el-button ?size="small" type="primary" @click="handleSave('form')" v-preventReClick>確定</el-button>從common.js導入指令preventReClick
import preventReClick from '../common' //防多次點擊，重復提交
防重復點擊(vue指令實現(xiàn))
阻止快速點擊按鈕會重復多次調(diào)用接口的
定義全局指令
// directive.js
export default {
? install (Vue) {
? ? // 防重復點擊(指令實現(xiàn))
? ? 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 );
按鈕調(diào)用直接加v-preventReClick
<el-button v-repeatClick type="prismary" style="width:100%;" @click="handleSubmit"></el-button>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個方法，它主要用于DOM操作，當我們修改Vue組件中的數(shù)據(jù)時，Vue.js會在下次事件循環(huán)前自動更新視圖，并異步執(zhí)行$nextTick()中的回調(diào)函數(shù)，本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下2023-05-05
雖然 vue-router 4 大多數(shù) API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時有一定的變化。接下來就學習學習它是如何使用的2021-11-11
在 Vue-CLI 中引入 simple-mock實現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11
本篇文章主要介紹了vue構(gòu)建單頁面應用實戰(zhàn)，使用 SPA，沒有頁面切換，就沒有白屏阻塞，可以大大提高 H5 的性能，達到接近原生的流暢體驗。2017-04-04
vue-mugen-scroll組件實現(xiàn)pc端滾動刷新
這篇文章主要為大家詳細介紹了vue-mugen-scroll組件實現(xiàn)pc端滾動刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法
下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學習組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式，需要的朋友可以參考下2023-03-03
本文主要介紹了Vue如何設(shè)置el-table背景透明樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在本篇文章里小編給大家整理了一篇關(guān)于vue中對虛擬dom的理解知識點總結(jié)內(nèi)容，有興趣的朋友們可以學習參考下。2021-06-06
vue3父子同信的雙向數(shù)據(jù)的項目實現(xiàn)
我們知道的是，父傳子的通信，和子傳父的通信，那如何實現(xiàn)父子相互通信的呢，本文就來詳細的介紹一下，感興趣的可以了解一下2023-08-08