快捷導(dǎo)航

vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式

更新時(shí)間：2024年08月29日 10:07:47 作者：zhooson

這篇文章主要介紹了vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令

// 注冊(cè)一個(gè)全局自定義指令 `v-debounce`
Vue.directive('debounce', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)...
  inserted: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value(); // 調(diào)用傳給指令的方法
      }, 500);
    });
  },
  // 當(dāng)綁定元素的父組件更新時(shí)...
  update: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value(); // 調(diào)用傳給指令的方法
      }, 500);
    });
  }
});

// 使用指令
// 在組件中
<template>
  <button v-debounce="myClickHandler">Click me</button>
</template>

<script>
export default {
  methods: {
    myClickHandler() {
      // 處理點(diǎn)擊事件
    }
  }
}
</script>

vue提交表單重復(fù)點(diǎn)擊，重復(fù)提交防抖問(wèn)題

問(wèn)題：用戶點(diǎn)擊保存時(shí)，可能會(huì)多次點(diǎn)擊。導(dǎo)致生成重復(fù)數(shù)據(jù)。

目標(biāo)：多次點(diǎn)擊時(shí)，1s內(nèi)只允許提交一次數(shù)據(jù)。

解決方案

1.在utils文件夾創(chuàng)建文件preventReClick.js

export default {
    install (Vue) {
      // 防止按鈕重復(fù)點(diǎn)擊
      Vue.directive('preventReClick', {
        inserted (el, binding) {
          // console.log("binding-7", binding)
          el.addEventListener('click', () => {
            if (!el.disabled) {
              el.disabled = true
              setTimeout(() => {
                el.disabled = false
              }, binding.value || 2000)
            }
          })
        }
      })
    }
  }

2.在main.js中引入

3、在.vue 文件中使用

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無(wú)效問(wèn)題的解決
這篇文章主要介紹了vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無(wú)效問(wèn)題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點(diǎn)擊事件的項(xiàng)不能包含在這個(gè)類名里面，不然會(huì)無(wú)法觸發(fā)點(diǎn)擊事件，詳細(xì)解決辦法跟隨小編一起學(xué)習(xí)吧
2022-05-05
如何利用Vue3+Vite批量導(dǎo)入模塊/資源
這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Vite批量導(dǎo)入模塊/資源的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-03-03
Vue3使用Lottie實(shí)現(xiàn)一個(gè)簡(jiǎn)單的加載動(dòng)畫
Lottie 是一個(gè)流行的動(dòng)畫庫(kù),它允許我們使用 JSON 文件來(lái)渲染高質(zhì)量的動(dòng)畫,本文將介紹一下如何在Vue3中集成 Lottie 動(dòng)畫實(shí)現(xiàn)一個(gè)加載動(dòng)畫效果,需要的可以了解下
2025-02-02
Vue實(shí)現(xiàn)低版本瀏覽器升級(jí)提示的代碼示例
在現(xiàn)代Web開(kāi)發(fā)中,瀏覽器兼容性是一個(gè)重要的問(wèn)題,盡管大多數(shù)用戶已經(jīng)轉(zhuǎn)向了現(xiàn)代瀏覽器,但仍有一部分用戶可能仍在使用老舊的瀏覽器版本,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)低版本瀏覽器升級(jí)提示,并通過(guò)多個(gè)代碼示例來(lái)展示不同的應(yīng)用場(chǎng)景和技術(shù)點(diǎn),需要的朋友可以參考下
2024-10-10
詳解vue樣式穿透的幾種方式
本文主要介紹了vue樣式穿透的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue3?vscode插件volar配置教程
這篇文章主要介紹了vue3?vscode插件volar配置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
Vue中keep-alive組件的原理與緩存詳解
Vue 的 keep-alive 是一個(gè)內(nèi)置組件,用于緩存不活動(dòng)的組件實(shí)例,避免重復(fù)渲染,從而優(yōu)化應(yīng)用性能,下面就跟隨小編一起來(lái)看看其核心實(shí)現(xiàn)原理和緩存內(nèi)容吧
2025-03-03
vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖代碼實(shí)例
這篇文章主要介紹了vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐
本文主要介紹了vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
詳解Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié)
這篇文章主要介紹了詳解Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12