詳解Vue.js自定義tipOnce指令用法實例
更新時間：2018年12月19日 14:28:33 作者：張炳
這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vuejs自定義指令是用來操作DOM的。盡管Vue推崇數(shù)據(jù)驅動視圖的理念，但并非所有情況都適合數(shù)據(jù)驅動。自定義指令就是一種有效的補充和擴展，不僅可用于定義任何的DOM操作，并且是可復用的。
最近碰到一種業(yè)務場景，業(yè)務場景如圖：
有個操作提示點擊可以顯示，足夠了吧？如圖：
不夠！好吧，產(chǎn)品說要求自動淡出提示！
后臺操作復雜需要有個明顯提示給業(yè)務人員更好地操作，而且這種提示，只需要一種提示就足夠。于是我就想到了自己實現(xiàn)自定義指令。
整個vuejs場景是利用了構建模式開發(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ù)保證 只調用一次，指令第一次綁到元素時調用，在這里可以進行一次性的初始化設置。那具體在指令里面做什么呢？ 我無非就是想做個提示語一次性展示出來。于是想到了Elementui里面的$.message,于是直接用了 obj做個轉接實例，不想另外寫提示語 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è)務類型（B端還是C端？），展示商品會根據(jù)展示位置顯示出對應的商品數(shù)據(jù)；'">展示商品：必須選擇對應的展示位置，才知道你所對應的業(yè)務類型（B端還是C端？），展示商品會根據(jù)展示位置顯示出對應的商品數(shù)據(jù)；</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
</el-row>
使用效果如下：
指令就那么簡單，可以根據(jù)你自己的思想甚至集成第三方插件使用，用出你想要的效果。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue使用vm.$set()解決對象新增屬性不能響應的問題,為了解決這個問題，Vue提供了一個特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了uni-app 實現(xiàn)小程序登錄注冊功能,文中給大家介紹了實現(xiàn)思路，以及vuex和本地緩存的區(qū)別，需要的朋友可以參考下2019-10-10
vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決
這篇文章主要介紹了vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
ios密碼框輸入密碼光標離開之后會提示存儲密碼的彈窗,關于這樣的問題怎么解決呢,下面給大家分享IOS上微信小程序密碼框光標離開提示存儲密碼的完美解決方案,感興趣的朋友一起看看吧2024-07-07
本文主要還是針對 Vue.js 2.x 版本，畢竟接下來一段時間，Vue.js 2.x 還是我們工作中的主流版本，對vue.js性能優(yōu)化技巧相關知識感興趣的朋友一起看看吧2021-09-09
vue推薦組件化開發(fā)，所以就把每個圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題，需要的朋友參考下吧2018-08-08
中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個簡單的連連看游戲,連連看大家一定都玩過吧,通過消除相同的圖案來清理棋盤,小編將一步步引導大家完成整個游戲的制作過程,讓我們開始吧,一起為中秋節(jié)增添一些互動和娛樂2023-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)登陸跳轉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了vue2路由表中異步加載組件命名方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇vue表單數(shù)據(jù)交互提交演示教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11