欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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))

阻止快速點擊按鈕會重復多次調用接口的

定義全局指令

// 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 );

按鈕調用直接加v-preventReClick

<el-button v-repeatClick type="prismary" style="width:100%;" @click="handleSubmit"></el-button>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

相關文章

  • Vue中this.$nextTick()方法的使用及代碼示例

    Vue中this.$nextTick()方法的使用及代碼示例

    $nextTick()是Vue.js框架中的一個方法，它主要用于DOM操作，當我們修改Vue組件中的數(shù)據(jù)時，Vue.js會在下次事件循環(huán)前自動更新視圖，并異步執(zhí)行$nextTick()中的回調函數(shù)，本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下
    2023-05-05
  • vue-router 4使用實例詳解

    vue-router 4使用實例詳解

    雖然 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)簡易的 API Mock 接口數(shù)據(jù)模擬

    本文以 Vue-CLI 為例介紹引入 simple-mock 實現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧
    2018-11-11
  • vue構建單頁面應用實戰(zhàn)

    vue構建單頁面應用實戰(zhàn)

    本篇文章主要介紹了vue構建單頁面應用實戰(zhàn)，使用 SPA，沒有頁面切換，就沒有白屏阻塞，可以大大提高 H5 的性能，達到接近原生的流暢體驗。
    2017-04-04
  • vue-mugen-scroll組件實現(xiàn)pc端滾動刷新

    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的寫法

    下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue3組合式API中setup()概念和reactive()函數(shù)的用法

    vue3組合式API中setup()概念和reactive()函數(shù)的用法

    這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學習組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式，需要的朋友可以參考下
    2023-03-03
  • Vue如何設置el-table背景透明樣式

    Vue如何設置el-table背景透明樣式

    本文主要介紹了Vue如何設置el-table背景透明樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • vue中對虛擬dom的理解知識點總結

    vue中對虛擬dom的理解知識點總結

    在本篇文章里小編給大家整理了一篇關于vue中對虛擬dom的理解知識點總結內容，有興趣的朋友們可以學習參考下。
    2021-06-06
  • vue3父子同信的雙向數(shù)據(jù)的項目實現(xiàn)

    vue3父子同信的雙向數(shù)據(jù)的項目實現(xiàn)

    我們知道的是，父傳子的通信，和子傳父的通信，那如何實現(xiàn)父子相互通信的呢，本文就來詳細的介紹一下，感興趣的可以了解一下
    2023-08-08

最新評論