Vue 3自定義指令開發

時間  2021-01-28
標籤 html 前端 vue node 前端框架 架構 app 框架 函數 工具 欄目 HTML 简体版
原文   原文鏈接

本文由葡萄城技術團隊原創並首發html

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。前端

 

什麼是指令（directive）

在Angular和Vue中都有Directive的概念，咱們一般講Directive 翻譯爲「指令」。vue

在計算機技術中，指令是由指令集架構定義的單個的CPU操做。在更普遍的意義上，「指令」能夠是任何可執行程序的元素的表述，例如字節碼。node

那麼在前端框架Vue中「指令」究竟是什麼，他有什麼做用呢？前端框架

 

 在Vue開發中咱們在模板中常常會使用v-model和v-show等以v-開頭的關鍵字，這些關鍵字就是Vue框架內置的指令。經過使用v-model，能夠獲取實現DOM和數據的綁定；使用v-show，能夠控制DOM元素顯示。簡而言之經過使用這些模板上的標籤，讓框架對DOM元素進行了指定的處理，同時DOM改變後框架能夠同時更新指定數據。指令是Vue MVVM的基礎之一。架構

 

指令的使用場景

 

除了使用內置的指令，Vue一樣支持自定義指令，如下場景能夠考慮經過自定義指令實現：app

DOM的基礎操做，當組件中的一些處理沒法用現有指令實現，能夠自定義指令實現。例如組件水印，自動focus。相對於用ref獲取DOM操做，封裝指令更加符合MVVM的架構，M和V不直接交互。框架

<p v-highlight="'yellow'">Highlight this text bright yellow</p>

　

多組件可用的通用操做，經過使用組件（Component）能夠很好的實現複用，一樣經過使用組件也能夠實現功能在組件上的複用。例如拼寫檢查、圖片懶加載。使用組件，只要在須要拼寫檢查的輸入組件上加上標籤，遍可爲組件注入拼寫檢查的功能，無需再針對不一樣組件封裝新的支持拼寫功能呢。函數

 

Vue 3如何自定義指令

Vue支持全局註冊和局部註冊指令。工具

全局註冊註冊經過app實例的directive方法進行註冊。

let app = createApp(App)
app.directive('highlight', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})

 

局部註冊經過給組件設置directive屬性註冊

export default defineComponent({
name: "WebDesigner",
components: {
Designer,
},
directives: {
highlight: {
beforeMount(el, binding, vnode) {
el.style.background = binding.value;
},
},
},
});

 

註冊組件包含組件的名字，須要惟一和組件的一個實現對象，組冊後便可在任何元素上使用了。　

<p v-highlight="'yellow'">Highlight this text bright yellow</p>

 

自定義組件就是實現Vue提供的鉤子函數，在Vue 3中鉤子函數的生命週期和組件的生命週期相似： 

  • created - 元素建立後，可是屬性和事件尚未生效時調用。
  • beforeMount- 僅調用一次，當指令第一次綁定元素的時候。
  • mounted- 元素被插入父元素時調用.
  • beforeUpdate: 在元素本身更新以前調用
  • Updated - 元素或者子元素更新以後調用.
  • beforeUnmount: 元素卸載前調用.
  • unmounted -當指令卸載後調用，僅調用一次

每個鉤子函數都有以下參數：

  • el: 指令綁定的元素，能夠用來直接操做DOM
  • binding: 數據對象，包含如下屬性
    •     instance: 當前組件的實例，通常推薦指令和組件無關，若是有須要使用組件上下文ViewModel，能夠從這裏獲取
    •     value: 指令的值，即上面示例中的「yellow「
    •     oldValue: 指令的前一個值，在beforeUpdate和Updated 中，能夠和value是相同的內容。
    •     arg: 傳給指令的參數，例如v-on:click中的click。
    •     modifiers: 包含修飾符的對象。例如v-on.stop:click 能夠獲取到一個{stop:true}的對象
  • vnode: Vue 編譯生成的虛擬節點,
  • prevVNode: Update時的上一個虛擬節點

 

Vue 2 指令升級

指令在Vue3中是一個Breaking Change，指令的鉤子函數名稱和數量發生了變化。Vue3中爲指令建立了更多的函數，函數名稱和組件的生命週期一致，更易理解。

如下是變化介紹

 

 

另外一個變化是組件上下文對象的獲取方式發生了變化。通常狀況下推薦指令和組件實例相互獨立，從自定義指令內部去訪問組件實例，那可能說明這裏不須要封裝指令，指令就是組件本事的功能。可是可能的確有某些場景須要去獲取組件實例。

在Vue 2中經過vnode參數獲取

bind(el, binding, vnode) {
  const vm = vnode.context
}

　

在Vue 3中 經過binding參數獲取　

mounted(el, binding, vnode) {
  const vm = binding.instance
}

 

Vue 3 自定義指令實例 – 輸入拼寫檢查

這裏使用Plugin的方式注入指令。

新建SpellCheckPlugin.ts，聲明插件，在插件的install方法中注入指令

import { App } from 'vue'

function SpellCheckMain(app: App, options: any) {
//
}

export default {
    install: SpellCheckMain
}

SpellCheckMain方法實現組件以及，拼寫檢查方法，具體拼寫檢查規則能夠根據業務或者使用其餘插件方法實現　　

function SpellCheckMain(app: App, options: any) {
    const SpellCheckAttribute = "spell-check-el";

    let SpellCheckTimer: Map<string, number> = new Map();
    let checkerId = 0;
    function checkElement(el: HTMLElement) {
        let attr = el.getAttribute(SpellCheckAttribute);
        if (attr) {
            clearTimeout(SpellCheckTimer.get(attr));
            let timer = setTimeout(() => { checkElementAsync(el) }, 500);
            SpellCheckTimer.set(attr, timer)
        }
    }
    function checkText(words?: string | null): [string?] {
        if (!words) {
            return [];
        }
        let errorWordList: [string?] = [];
        try {
            let wordsList = words.match(/[a-zA-Z]+/ig);
            wordsList?.forEach((word) => {
                if (!checkWord(word)) {
                    errorWordList.push(word);
                }
            })
        }
        catch {

        }
        return errorWordList;
    }
    function checkWord(text: string) {
        //模擬拼寫檢查，這裏使用其餘檢查庫
        return text.length > 6 ? false : true;
    }
    function checkElementAsync(el: HTMLElement) {

        let text = (el as HTMLInputElement).value || el.innerText;
        let result = checkText(text);

        let attr = el.getAttribute(SpellCheckAttribute);
        if (!attr) {
            return;
        }

        if (result && result.length) {
            el.style.background = "pink"
            let div = document.getElementById(attr);
            if (!div) {
                div = document.createElement("div");
                div.id = attr;
                div.style.position = "absolute"
                div.style.top = "0px"
                div.style.left = el.clientWidth + "px"

                if (el.parentElement) {
                    el.parentElement.style.position = "relative"
                    if (el.parentElement.lastChild === el) {
                        el.parentElement.appendChild(div);
                    }
                    else {
                        el.parentElement.insertBefore(div, el.nextSibling);
                    }
                }
            }
            div.innerHTML = result.length.toString() + " - " + result.join(",");
        } else {
            el.style.background = "";

            let div = document.getElementById(attr);
            if (div) {
                div.innerHTML = ""
            }
        }

        console.log(result)
    }

    app.directive('spell-check', {
        created() {
            console.log("created", arguments)
        },
        mounted: function (el, binding, vnode, oldVnode) {

            console.log("mounted", arguments)
            //set checker id for parent
            let attr = "spellcheck-" + (checkerId++);
            el.setAttribute(SpellCheckAttribute, attr);
            console.log("attr", attr)

            if (el.tagName.toUpperCase() === "DIV") {
                el.addEventListener("blur", function () {
                    checkElement(el)
                }, false);
            }
            if (el.tagName.toUpperCase() === "INPUT") {
                el.addEventListener("keyup", function () {
                    checkElement(el)
                }, false);
            }
            // el.addEventListener("focus", function () {
            //     checkElement(el)
            // }, false);
        },
        updated: function (el) {
            console.log("componentUpdated", arguments)
            checkElement(el);
        },
        unmounted: function (el) {
            console.log("unmounted", arguments)

            let attr = el.getAttribute(SpellCheckAttribute);
            if (attr) {
                let div = document.getElementById(attr);
                if (div) {
                    div.remove();
                }
            }
        }
    })
}

　　

main.ts中使用插件

/// <reference path="./vue-app.d.ts" />
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import SpellCheckPlugin  from './plugins/SpellCheckPlugin'

let app = createApp(App)
app.use(SpellCheckPlugin)
app.use(router).mount('#app')

 

組件中直接使用指令便可

<template>
  <div ref="ssHost" style="width: 100%; height: 600px"></div>
  <div><div ref="fbHost" spell-check v-spell-check="true" contenteditable="true" spellcheck="false" style="border: 1px solid #808080;width:600px;"></div></div>
  <div><input v-model="value1" v-spell-check spellcheck="false" style="width:200px;" /></div>
</template>

　　

結合在使用SpreadJS上 ，基於檢查用戶拼寫輸入的功能，效果以下圖：

以上就是Vue3 自定義指令開發的部分玩法介紹，你們若是知道更多的使用方法歡迎經過留言分享出來。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程