vue指令怎么防止按鈕連點(diǎn)

這篇文章主要介紹“vue指令怎么防止按鈕連點(diǎn)”，在日常操作中，相信很多人在vue指令怎么防止按鈕連點(diǎn)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue指令怎么防止按鈕連點(diǎn)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

鉤子函數(shù)

• bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

• inserted：被綁定元素插入父節(jié)點(diǎn)時調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

• 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é)點(diǎn)。移步 VNode API 來了解更多詳情。

• oldVnode：上一個虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

實(shí)現(xiàn)

在頁面中使用

<template>
  <div>
   <el-button v-preventDbClick:continuous="j">測試連點(diǎn)</el-button>
   <!--v-preventDbClick:continuous="j" 這種寫法是為了實(shí)現(xiàn)方法傳參 下面會結(jié)合js解釋-->
   <div>
     <h2>{{i}}</h2>
   </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)實(shí)例 v-mydirective:[argument]="value"  argument 參數(shù)可以根據(jù)組件實(shí)例數(shù)據(jù)進(jìn)行更新
          // binding.value則是需要的傳參
          _this[binding.arg](binding.value)    
        }, 300)
      })
    }
  })

在main.js中引用

import directives from './directives'
Vue.use(directives)

到此，關(guān)于“vue指令怎么防止按鈕連點(diǎn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！