本篇文章為大家展示了如何在Vue 3項目中自定義指令開發(fā)，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)服務(wù)項目包括巴中網(wǎng)站建設(shè)、
巴中網(wǎng)站制作、巴中網(wǎng)頁制作以及巴中網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，
巴中網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到巴中省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
什么是指令（directive）
在Angular和Vue中都有Directive的概念，我們通常講Directive 翻譯為“指令”。
在計算機(jī)技術(shù)中，指令是由指令集架構(gòu)定義的單個的CPU操作。在更廣泛的意義上，“指令”可以是任何可執(zhí)行程序的元素的表述，例如字節(jié)碼。
那么在前端框架Vue中“指令”到底是什么，他有什么作用呢？
在Vue開發(fā)中我們在模板中經(jīng)常會使用v-model和v-show等以v-開頭的關(guān)鍵字，這些關(guān)鍵字就是Vue框架內(nèi)置的指令。通過使用v-model，可以獲取實現(xiàn)DOM和數(shù)據(jù)的綁定；使用v-show，可以控制DOM元素顯示。簡而言之通過使用這些模板上的標(biāo)簽，讓框架對DOM元素進(jìn)行了指定的處理，同時DOM改變后框架可以同時更新指定數(shù)據(jù)。指令是Vue MVVM的基礎(chǔ)之一。
指令的使用場景
除了使用內(nèi)置的指令，Vue同樣支持自定義指令，以下場景可以考慮通過自定義指令實現(xiàn)：
DOM的基礎(chǔ)操作，當(dāng)組件中的一些處理無法用現(xiàn)有指令實現(xiàn)，可以自定義指令實現(xiàn)。例如組件水印，自動focus。相對于用ref獲取DOM操作，封裝指令更加符合MVVM的架構(gòu)，M和V不直接交互。
Highlight this text bright yellow
多組件可用的通用操作，通過使用組件（Component）可以很好的實現(xiàn)復(fù)用，同樣通過使用組件也可以實現(xiàn)功能在組件上的復(fù)用。例如拼寫檢查、圖片懶加載。使用組件，只要在需要拼寫檢查的輸入組件上加上標(biāo)簽，遍可為組件注入拼寫檢查的功能，無需再針對不同組件封裝新的支持拼寫功能呢。
Vue 3如何自定義指令
Vue支持全局注冊和局部注冊指令。
全局注冊注冊通過app實例的directive方法進(jìn)行注冊。
let app = createApp(App)
app.directive('highlight', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})局部注冊通過給組件設(shè)置directive屬性注冊
export default defineComponent({
name: "WebDesigner",
components: {
Designer,
},
directives: {
highlight: {
beforeMount(el, binding, vnode) {
el.style.background = binding.value;
},
},
},
});注冊組件包含組件的名字，需要和組件的一個實現(xiàn)對象，組冊后即可在任何元素上使用了。
Highlight this text bright yellow
自定義組件就是實現(xiàn)Vue提供的鉤子函數(shù)，在Vue 3中鉤子函數(shù)的生命周期和組件的生命周期類似：
created - 元素創(chuàng)建后，但是屬性和事件還沒有生效時調(diào)用。
beforeMount- 僅調(diào)用一次，當(dāng)指令第一次綁定元素的時候。
mounted- 元素被插入父元素時調(diào)用.
beforeUpdate: 在元素自己更新之前調(diào)用
Updated - 元素或者子元素更新之后調(diào)用.
beforeUnmount: 元素卸載前調(diào)用.
unmounted -當(dāng)指令卸載后調(diào)用，僅調(diào)用一次
每一個鉤子函數(shù)都有如下參數(shù)：
instance: 當(dāng)前組件的實例，一般推薦指令和組件無關(guān)，如果有需要使用組件上下文ViewModel，可以從這里獲取
value: 指令的值，即上面示例中的“yellow“
oldValue: 指令的前一個值，在beforeUpdate和Updated 中，可以和value是相同的內(nèi)容。
arg: 傳給指令的參數(shù)，例如v-on:click中的click。
modifiers: 包含修飾符的對象。例如v-on.stop:click 可以獲取到一個{stop:true}的對象
Vue 2 指令升級
指令在Vue3中是一個Breaking Change，指令的鉤子函數(shù)名稱和數(shù)量發(fā)生了變化。Vue3中為指令創(chuàng)建了更多的函數(shù)，函數(shù)名稱和組件的生命周期一致，更易理解。
以下是變化介紹
另一個變化是組件上下文對象的獲取方式發(fā)生了變化。一般情況下推薦指令和組件實例相互獨(dú)立，從自定義指令內(nèi)部去訪問組件實例，那可能說明這里不需要封裝指令，指令就是組件本事的功能。但是可能的確有某些場景需要去獲取組件實例。
在Vue 2中通過vnode參數(shù)獲取
bind(el, binding, vnode) {
const vm = vnode.context
}在Vue 3中 通過binding參數(shù)獲取
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方法實現(xiàn)組件以及，拼寫檢查方法，具體拼寫檢查規(guī)則可以根據(jù)業(yè)務(wù)或者使用其他插件方法實現(xiàn)
function SpellCheckMain(app: App, options: any) {
const SpellCheckAttribute = "spell-check-el";
let SpellCheckTimer: Map = 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中使用插件
///
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')
組件中直接使用指令即可
重慶分公司
重慶分公司
