国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Gilbertat / 2259人閱讀

摘要：自定義指令是用來操作的。自定義指令就是一種有效的補(bǔ)充和擴(kuò)展，不僅可用于定義任何的操作，并且是可復(fù)用的。于是我就想到了自己實(shí)現(xiàn)自定義指令。

vuejs自定義指令是用來操作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)品說要求自動(dòng)淡出提示！

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

整個(gè)vuejs場(chǎng)景是利用了構(gòu)建模式開發(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
      });            
  }
})

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

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

    
        
            

                
                    
                        
                        
展示商品：必須選擇對(duì)應(yīng)的展示位置，才知道你所對(duì)應(yīng)的業(yè)務(wù)類型（B端還是C端？），展示商品會(huì)根據(jù)展示位置顯示出對(duì)應(yīng)的商品數(shù)據(jù)；

使用效果如下：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/100064.html

相關(guān)文章

  • vue學(xué)習(xí)筆記（二）

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

    klivitamJ 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記（二）

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

    Pines_Cheng 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記（二）

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

    ideaa 評(píng)論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    baoxl 評(píng)論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    liukai90 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<