<del id="6swmo"></del>

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

Gilbertat 發布于2019-08-23 14:05 / 2268人閱讀

摘要：自定義指令是用來操作的。自定義指令就是一種有效的補充和擴展，不僅可用于定義任何的操作，并且是可復用的。于是我就想到了自己實現自定義指令。

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指令吧。代碼如下：

    
        
            
                
                    
                        
                        展示商品：必須選擇對應的展示位置，才知道你所對應的業務類型（B端還是C端？），展示商品會根據展示位置顯示出對應的商品數據；

使用效果如下：

指令就那么簡單，可以根據你自己的思想甚至集成第三方插件使用，用出你想要的效果。

云服務器 GPU云服務器自定義指令實例自定義指令使用自定義鏡像創建實例通過實例創建自定義鏡像

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100064.html

vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

klivitamJ 2019-08-30 13:48 評論0 收藏0
vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

Pines_Cheng 2019-08-21 17:08 評論0 收藏0
vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

ideaa 2019-08-01 17:48 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

baoxl 2019-08-30 13:47 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

liukai90 2019-08-21 17:05 評論0 收藏0