vue指令防止按鈕連點解析
更新時間：2022年04月25日 11:49:01 作者：一條小鯊魚
這篇文章主要介紹了vue指令防止按鈕連點解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue指令防止按鈕連點
在開發(fā)中，經(jīng)常會遇到客戶反饋一個數(shù)據(jù)提交了兩邊的情況，這種情況不能夠去限制用戶的操作規(guī)范通常的處理方式都會在按鈕產(chǎn)生的函數(shù)中做處理，但是這樣的重復(fù)性工作讓我很難受，所以自己嘗試用vue指令的方式去解決。
查過不少教程，都是去更改disabled屬性去解決，但是這并不是我想要的一種效果，所以經(jīng)過一些其他的參考和自己的想法有了一下這種方式
在使用指令的時候我們需要知道指令的一些基本知識（飛機票轉(zhuǎn)場vue官網(wǎng)）
鉤子函數(shù)
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(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：字符串形式的指令表達式。例如 v-my-directive=“1 + 1” 中，表達式為 “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ù)進行更新
? ? ? ? ? // 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的自定義指令傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在vue中實現(xiàn)給每個頁面頂部設(shè)置title
這篇文章主要介紹了在vue中實現(xiàn)給每個頁面頂部設(shè)置title，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Axios?是一個基于?promise?的網(wǎng)絡(luò)請求庫，可以用于瀏覽器和?node.js，Axios?使用簡單,包尺寸小且提供了易于擴展的接口，這篇文章主要介紹了vue中使用Axios最佳實踐,需要的朋友可以參考下2022-09-09
使用vue的v-for生成table并給table加上序號的實例代碼
這篇文章主要介紹了使用vue的v-for生成table并給table加上序號的相關(guān)資料,需要的朋友可以參考下2017-10-10
vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案
這篇文章主要介紹了vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案 ，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue項目部署到nginx/tomcat服務(wù)器的實現(xiàn)
這篇文章主要介紹了vue項目部署到nginx/tomcat服務(wù)器的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue樣式穿透 ::v-deep的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue項目如何實現(xiàn)ip和localhost同時訪問
這篇文章主要介紹了vue項目如何實現(xiàn)ip和localhost同時訪問，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了實現(xiàn)一個VUE響應(yīng)式屬性裝飾器詳析，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
在本篇文章里小編給大家整理的是一篇關(guān)于vue中進行微博分享的實例內(nèi)容，有需要的朋友們可以參考下。2019-10-10