vue指令防止按鈕連點解析
更新時間：2022年04月25日 11:49:01 作者：一條小鯊魚
這篇文章主要介紹了vue指令防止按鈕連點解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue指令防止按鈕連點
在開發(fā)中，經(jīng)常會遇到客戶反饋一個數(shù)據(jù)提交了兩邊的情況，這種情況不能夠去限制用戶的操作規(guī)范通常的處理方式都會在按鈕產(chǎn)生的函數(shù)中做處理，但是這樣的重復(fù)性工作讓我很難受，所以自己嘗試用vue指令的方式去解決。
查過不少教程，都是去更改disabled屬性去解決，但是這并不是我想要的一種效果，所以經(jīng)過一些其他的參考和自己的想法有了一下這種方式
在使用指令的時候我們需要知道指令的一些基本知識（飛機(jī)票轉(zhuǎn)場vue官網(wǎng)）
鉤子函數(shù)
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
鉤子函數(shù)參數(shù)
el：指令所綁定的元素，可以用來直接操作 DOM。binding：一個對象，包含以下 property：name：指令名，不包括 v- 前綴。value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。expression：字符串形式的指令表達(dá)式。例如 v-my-directive=“1 + 1” 中，表達(dá)式為 “1 + 1”。arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 “foo”。modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。
實現(xiàn)
在頁面中使用
<template>
? <div>
? ?<el-button v-preventDbClick:continuous="j">測試連點</el-button>
? ?<!--v-preventDbClick:continuous="j" 這種寫法是為了實現(xiàn)方法傳參 下面會結(jié)合js解釋-->
? ?<div>
? ? ?<h1>{{i}}</h1>
? ?</div>
? </div>
</template><script>
export default {
? data(){
? ? return{
? ? ? i: '6',
? ? ? j: '56'
? ? }
? },
? methods:{
? ? continuous(value){
? ? ? this.i = value
? ? },
? },
}
</script>
在directives.js文件下
?Vue.directive('preventDbClick',{
? ? bind(el, binding, vnode){
? ? ? let timer
? ? ? el.addEventListener('click',() =>{
? ? ? ? if (timer) {
? ? ? ? ? clearTimeout(timer)
? ? ? ? }
? ? ? ? timer = setTimeout(() => {
? ? ? ? ? let _this = vnode.context
? ? ? ? ? // binding.arg的值就是v-preventDbClick:continuous的continuous ? 此時的continuous是靜態(tài)的
? ? ? ? ? // 官網(wǎng)實例 v-mydirective:[argument]="value" ?argument 參數(shù)可以根據(jù)組件實例數(shù)據(jù)進(jìn)行更新
? ? ? ? ? // binding.value則是需要的傳參
? ? ? ? ? _this[binding.arg](binding.value)?? ?
? ? ? ? }, 300)
? ? ? })
? ? }
? })在main.js中引用
import directives from './directives' Vue.use(directives)
這種方式并不完善，有些情況并不適用（比如傳多個參數(shù)）。希望這種方式能夠給你新的思路。
vue防連點,重復(fù)點擊
防止重復(fù)點擊，重復(fù)提交或者重復(fù)跳轉(zhuǎn)頁面
自定義指令，通過在標(biāo)簽原型上面綁定狀態(tài)的方式，控制是否可以重復(fù)點擊
局部注冊
export default {
? name: "",
? directives: {
? ? preventRepeat: {
? ? ? inserted(el, binding) {
? ? ? ? function __avoidRepeatHandler__() {
? ? ? ? ? if (el.__clickDisabled__) return;
? ? ? ? ? el.__clickDisabled__ = true;
? ? ? ? ? el.__originalPointerEvents__ = el.style.pointerEvents;
? ? ? ? ? el.style.pointerEvents = "none";
? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? el.__clickDisabled__ = false;
? ? ? ? ? ? el.style.pointerEvents = el.__originalPointerEvents__;
? ? ? ? ? }, binding.value || 1000);
? ? ? ? }
? ? ? ? el.addEventListener("click", __avoidRepeatHandler__);
? ? ? ? el.__avoidRepeatHandler__ = __avoidRepeatHandler__;
? ? ? },
? ? ? unbind(el) {
? ? ? ? el.removeEventListener("click", el.__avoidRepeatHandler__);
? ? ? ? delete el.__clickDisabled__;
? ? ? ? delete el.__originalPointerEvents__;
? ? ? },
? ? },
? },
?}在需要訪點擊提交的地方使用此指令v-preventRepeat或者v-prevent-repeat
?<div ?@click="pointPraise" v-preventRepeat>提交</div>
全局注冊
新建plugins.js
export default {
? install(Vue) {
? ? // 防重復(fù)點擊(指令實現(xiàn))
? ? Vue.directive('preventRepeat', {
? ? ? inserted(el, binding) {
? ? ? ? function __avoidRepeatHandler__() {
? ? ? ? ? if (el.__clickDisabled__) return;
? ? ? ? ? el.__clickDisabled__ = true;
? ? ? ? ? el.__originalPointerEvents__ = el.style.pointerEvents;
? ? ? ? ? el.style.pointerEvents = "none";
? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? el.__clickDisabled__ = false;
? ? ? ? ? ? el.style.pointerEvents = el.__originalPointerEvents__;
? ? ? ? ? }, binding.value || 1000);
? ? ? ? }
? ? ? ? el.addEventListener("click", __avoidRepeatHandler__);
? ? ? ? el.__avoidRepeatHandler__ = __avoidRepeatHandler__;
? ? ? },
? ? ? unbind(el) {
? ? ? ? el.removeEventListener("click", el.__avoidRepeatHandler__);
? ? ? ? delete el.__clickDisabled__;
? ? ? ? delete el.__originalPointerEvents__;
? ? ? },
? ? })
? }
}main.js中全局引入并使用
import directives from '@/utils/plugins.js' Vue.use(directives)
在需要訪點擊提交的地方使用此指令v-preventRepeat
<div ?@click="pointPraise" v-preventRepeat>提交</div>
可以傳參指定時間
<div v-preventRepeat="800" @click="onClick">
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 動態(tài)組件用法,結(jié)合實例形式總結(jié)分析了vue 動態(tài)組件基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2020-03-03
這篇文章為大家詳細(xì)介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋友們可以一起看看吧。2016-10-10
Vue.js獲取手機(jī)系統(tǒng)型號、版本、瀏覽器類型的示例代碼
這篇文章主要介紹了vue js獲取手機(jī)系統(tǒng)型號、版本、瀏覽器類型的示例代碼，代碼簡單易懂，非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
vue.js中使用微信掃一掃解決invalid signature問題(完美解決)
這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問題(推薦),本文通過實例代碼給出解決方法，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了理順8個版本vue的區(qū)別(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue組件中props與data的結(jié)合使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能
本文給大家?guī)硪粋€小案例基于vue實現(xiàn)學(xué)生錄入系統(tǒng)功能，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
本篇文章主要介紹了Vue監(jiān)聽數(shù)據(jù)變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
詳解如何配置vue-cli3.0的vue.config.js
這篇文章主要介紹了詳解如何配置vue-cli3.0的vue.config.js，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue異步加載about組件的相關(guān)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10