vue指令怎么防止按鈕連點

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

鉤子函數

• bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

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

• update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新

• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。

• unbind：只調用一次，指令與元素解綁時調用。

鉤子函數參數

• 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：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 “foo”。

• modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

• vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。

• oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

實現

在頁面中使用

<template>
  <div>
   <el-button v-preventDbClick:continuous="j">測試連點</el-button>
   <!--v-preventDbClick:continuous="j" 這種寫法是為了實現方法傳參 下面會結合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是靜態的
          // 官網實例 v-mydirective:[argument]="value"  argument 參數可以根據組件實例數據進行更新
          // binding.value則是需要的傳參
          _this[binding.arg](binding.value)    
        }, 300)
      })
    }
  })

在main.js中引用

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

到此，關于“vue指令怎么防止按鈕連點”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！