詳解Vue.js自定義tipOnce指令用法實例

2019-11-19 12:19:39

字體：大中小

供稿：網(wǎng)友

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

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

有個操作提示點擊可以顯示，足夠了吧？如圖：

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

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

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

let obj = new Vue({ router, store, render: h => h(App)}).$mount('#app-box');//注冊一個全局自定義指令 `v-tipOnce`Vue.directive('tipOnce', { bind: function (el,binding) {   console.log(el,binding);   obj.$message({    type: 'info',    message: binding.value   });       }})

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

好了，我們在單頁面組件用上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="'展示商品：必須選擇對應(yīng)的展示位置，才知道你所對應(yīng)的業(yè)務(wù)類型（B端還是C端？），展示商品會根據(jù)展示位置顯示出對應(yīng)的商品數(shù)據(jù)；'">展示商品：必須選擇對應(yīng)的展示位置，才知道你所對應(yīng)的業(yè)務(wù)類型（B端還是C端？），展示商品會根據(jù)展示位置顯示出對應(yīng)的商品數(shù)據(jù)；</div>          </el-collapse-item>        </el-collapse>      </div>    </el-col>  </el-row>

使用效果如下：