Vue自定義指令-讓你的業務開發更簡單-有解無憂

1、使用場景

在日常開發中，我們會將重復代碼抽象為一個函式或者組件，然后在需要時呼叫或者引入，但是，對于某些功能，這種方法可能不夠優雅或者不夠靈活，例如，我們可能需要在DOM元素上添加一些自定義屬性或者系結一些事件，這些操作可能難以通過函式或組件來實作，這時，自定義指令就派上用場了，

2、簡介

1.注冊使用(官網例子：頁面加載時，該元素將獲得焦點)

全域注冊

Vue.directive('focus', {
  // 當被系結的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
});

組件注冊

...
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}
...

使用

<input v-focus>

2.鉤子函式

一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：

bind：只呼叫一次，指令第一次系結到元素時呼叫，在這里可以進行一次性的初始化設定，
inserted：被系結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入檔案中)，
update：所在組件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前，
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后呼叫，
unbind：只呼叫一次，指令與元素解綁時呼叫，

3.鉤子函式引數

el：指令所系結的元素，可以用來直接操作 DOM，
binding：一個物件，包含以下 property：
vnode：Vue 編譯生成的虛擬節點
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用，

4.舉個例子

<div>
    <button @click="changeCustom">顯示:{{ isShowCustom }}</button>
    <button @click="changeCustomText">生成亂數</button>
</div>
<div  v-if="isShowCustom">
    <div v-change-style="'#0f0'">{{ customMsg1 }}</div>
</div>
...
// 注冊全域自定義指令
Vue.directive('change-style', {
    bind: (el) => {
        console.log('1、只呼叫一次，指令第一次系結到元素時呼叫，在這里可以進行一次性的初始化設定，');
    },
    inserted: () => {
        console.log('2、被系結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入檔案中)，');
    },
    update: () => {
        console.log('3、所在組件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前，');
    },
    componentUpdated: () => {
        console.log('4、指令所在組件的 VNode 及其子 VNode 全部更新后呼叫，');
    },
    unbind: () => {
        console.log('5、只呼叫一次，指令與元素解綁時呼叫，');
    },
});

3、優點

1.重用性：多個組件之間共享代碼 2.封裝性: 將特定的操作封裝在指令中，使得組件代碼更加簡潔，易于維護 3.靈活性：可以處理一些特定的操作，例如修改DOM屬性、系結事件等 4.可讀性：
讓模板更加清晰和易于閱讀，在模板中使用指令可以讓代碼更加簡潔明了，從而降低了代碼的復雜度 5.可維護性：把特定的邏輯封裝在指令內部，從而讓代碼更加易于維護，如果需要更改某個行為，只需要在指令中修改即可，不需要修改多個組件 6.**
可擴展性**：如果需要添加新的特殊行為，只需要創建一個新的指令即可

4、常用自定義指令

以下總結了個人在日常活動開發中常用的自定義指令

1.防止重復操作(節流)
一段時間內只允許操作一次適用場景：介面請求、頻率限制

// 用法：v-throttle = [節流時間] 
// 單位：毫秒
<button v-throttle="2000" @click="print">提交</button>

2.一鍵復制

// 用法：v-copy = [待復制內容文本] 
// 型別：string
<button v-copy="'這是一段復制內容'">復制按鈕</button>

3.活動埋點頁面曝光埋點以及點擊事件埋點

// 用法 v-track:[埋點上報頁面].[埋點型別].[是否延時] = "埋點"
// 埋點上報頁面 - page_id 默認值：:activity_page
// 埋點型別 - event| exposure 默認值： click
// 是否延時 - delay 默認值：2000ms

// 點擊事件指令
<button v-track:activity_page.click.delay="'btn_click'">點擊事件</button>
// 等價于以下方法：
setTimeout(() => {
    track({
        page_id: 'activity_page',
    }, 'click');
}, 2000);

// 曝光事件指令
<div v-track:activity_page.exposure></div>
// 等價于以下方法：
track({
    page_id: 'activity_page',
}, 'exposure');

4.圖片懶加載在圖片出現在視窗區域時開始加載，減少不必要的請求以及流量，適用于無限滾動串列以及瀑布流頁面，

用法：v-lazy = [圖片地址]
<img v-lazy="item">

5.懸浮拖拽懸浮可拖拽按鈕

// 用法： v-drag
// 備注：目前暫支持移動端
<button v-drag @click="print">拖拽按鈕</button>

6.無限滾動加載讓網頁在滾動到頁面底部時自動加載更多的內容，從而提高用戶體驗和頁面性能，

// 用法：v-scroll-bottom = "事件"
v-scroll-bottom="loadMore"
<div  v-scroll-bottom="loadMore">
    <div  v-for="(item, index) in list"
         :key="index">
        {{ index }}
    </div>
</div>

7.其他自定義指令

非活動時間操作提示
金額處理
表單輸入框處理判斷處理
權限管理

5、總結

可以看到，通過封裝使用自定義指令，使我們的代碼更簡潔優雅，在實際開發中，可以根據具體場景和需求來使用自定義指令，以提高開發效率和代碼質量，

directives.js代碼檔案

注：代碼基于vue2.x版本

參考：
自定義指令 — Vue.js
擼一個 Vue 自定義指令實作一鍵 Copy的功能 - 掘金
v-track

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554467.html

標籤：其他

上一篇：Vue自定義指令-讓你的業務開發更簡單

下一篇：返回列表