vuejs自定義指令是用來操作DOM的。盡管Vue推崇數據驅動視圖的理念,但并非所有情況都適合數據驅動。自定義指令就是一種有效的補充和擴展,不僅可用于定義任何的DOM操作,并且是可復用的。
最近碰到一種業務場景,業務場景如圖:
有個操作提示點擊可以顯示,足夠了吧?如圖:
不夠!好吧,產品說要求自動淡出提示!
后臺操作復雜需要有個明顯提示給業務人員更好地操作,而且這種提示,只需要一種提示就足夠。于是我就想到了自己實現自定義指令。
整個vuejs場景是利用了構建模式開發,在我的main.js代碼是這樣魯的:
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鉤子函數保證 只調用一次,指令第一次綁到元素時調用,在這里可以進行一次性的初始化設置。那具體在指令里面做什么呢? 我無非就是想做個提示語一次性展示出來。于是想到了Elementui里面的$.message,于是直接用了 obj做個轉接實例,不想另外寫提示語 dom創建了。我們可以嘗試打印 el,和bingding是什么,其中el是dom實例,至于binding看下面代碼的用法傳的參數就知道。
好了,我們在單頁面組件用上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="'展示商品:必須選擇對應的展示位置,才知道你所對應的業務類型(B端還是C端?),展示商品會根據展示位置顯示出對應的商品數據;'">展示商品:必須選擇對應的展示位置,才知道你所對應的業務類型(B端還是C端?),展示商品會根據展示位置顯示出對應的商品數據;</div> </el-collapse-item> </el-collapse> </div> </el-col> </el-row>
使用效果如下:
指令就那么簡單,可以根據你自己的思想甚至集成第三方插件使用,用出你想要的效果。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答