快捷導(dǎo)航

詳解Vue.js自定義tipOnce指令用法實(shí)例

更新時(shí)間：2018年12月19日 14:28:33 作者：張炳

這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

vuejs自定義指令是用來(lái)操作DOM的。盡管Vue推崇數(shù)據(jù)驅(qū)動(dòng)視圖的理念，但并非所有情況都適合數(shù)據(jù)驅(qū)動(dòng)。自定義指令就是一種有效的補(bǔ)充和擴(kuò)展，不僅可用于定義任何的DOM操作，并且是可復(fù)用的。

最近碰到一種業(yè)務(wù)場(chǎng)景，業(yè)務(wù)場(chǎng)景如圖：

有個(gè)操作提示點(diǎn)擊可以顯示，足夠了吧？如圖：

不夠！好吧，產(chǎn)品說(shuō)要求自動(dòng)淡出提示！

后臺(tái)操作復(fù)雜需要有個(gè)明顯提示給業(yè)務(wù)人員更好地操作，而且這種提示，只需要一種提示就足夠。于是我就想到了自己實(shí)現(xiàn)自定義指令。

整個(gè)vuejs場(chǎng)景是利用了構(gòu)建模式開(kāi)發(fā)，在我的main.js代碼是這樣魯?shù)模?/p>

let obj = new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app-box');


//注冊(cè)一個(gè)全局自定義指令 `v-tipOnce`
Vue.directive('tipOnce', {
 bind: function (el,binding) {
   console.log(el,binding);
   obj.$message({
    type: 'info',
    message: binding.value
   });      
 }
})

通過(guò)directive注冊(cè)v-tipOnce 全局指令，通過(guò)指令的 bind鉤子函數(shù)保證只調(diào)用一次，指令第一次綁到元素時(shí)調(diào)用，在這里可以進(jìn)行一次性的初始化設(shè)置。那具體在指令里面做什么呢？我無(wú)非就是想做個(gè)提示語(yǔ)一次性展示出來(lái)。于是想到了Elementui里面的$.message,于是直接用了 obj做個(gè)轉(zhuǎn)接實(shí)例，不想另外寫(xiě)提示語(yǔ) dom創(chuàng)建了。我們可以嘗試打印 el,和bingding是什么，其中el是dom實(shí)例，至于binding看下面代碼的用法傳的參數(shù)就知道。

好了，我們?cè)趩雾?yè)面組件用上v-tipOnce指令吧。代碼如下：

  <el-row>
    <el-col :span="24">
      <div>
        <el-collapse>
          <el-collapse-item>
            <template slot="title">
            <div class="danger"> <i class="header-icon el-icon-search"></i> 操作提示 Operation Tips </div>  
            </template>
            <div class="danger" v-tipOnce="'展示商品：必須選擇對(duì)應(yīng)的展示位置，才知道你所對(duì)應(yīng)的業(yè)務(wù)類型（B端還是C端？），展示商品會(huì)根據(jù)展示位置顯示出對(duì)應(yīng)的商品數(shù)據(jù)；'">展示商品：必須選擇對(duì)應(yīng)的展示位置，才知道你所對(duì)應(yīng)的業(yè)務(wù)類型（B端還是C端？），展示商品會(huì)根據(jù)展示位置顯示出對(duì)應(yīng)的商品數(shù)據(jù)；</div>

          </el-collapse-item>
        </el-collapse>
      </div>
    </el-col>
  </el-row>

使用效果如下：