Summary of Vue 3 custom directive development

What is a directive?

Both Angular and Vue have the concept of Directive, which we usually translate as "instructions".

In computer technology, an instruction is a single CPU operation defined by an instruction set architecture. In a broader sense, "instructions" can be any representation of an element of an executable program, such as bytecode.

So what exactly is a "directive" in the front-end framework Vue, and what is its function?

In Vue development, we often use keywords starting with v-, such as v-model and v-show, in templates. These keywords are built-in instructions of the Vue framework. By using v-model, you can achieve the binding of DOM and data; by using v-show, you can control the display of DOM elements. In short, by using the tags on these templates, the framework can perform specified processing on DOM elements, and the framework can update the specified data at the same time after the DOM changes. Directives are one of the foundations of Vue MVVM.

Instruction usage scenarios

In addition to using built-in instructions, Vue also supports custom instructions. The following scenarios can be implemented through custom instructions:

Basic DOM operations. When some processing in a component cannot be implemented with existing instructions, you can use custom instructions to implement it. For example, component watermark and automatic focus. Compared with using ref to obtain DOM operations, encapsulating instructions is more in line with the MVVM architecture, and M and V do not interact directly.

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

Common operations available to multiple components can be well reused by using components. Similarly, functions can be reused on components. For example, spell checking and lazy loading of images. When using components, you only need to add a label to the input component that needs spell checking, and you can inject the spell checking function into the component. There is no need to encapsulate new spelling support functions for different components.

How to customize directives in Vue 3

Vue supports global and local registration of directives.

Global registration is registered through the directive method of the app instance.

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

Local registration is done by setting the directive attribute on the component.

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

The registered component includes the name of the component, which needs to be unique, and an implementation object of the component. After registration, it can be used on any element.

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

A custom component implements the hook function provided by Vue. In Vue 3, the life cycle of the hook function is similar to the life cycle of the component:

• created - called after the element is created, but before its attributes and events take effect.
• beforeMount - called only once, when the directive is first attached to an element.
• mounted - called when the element is inserted into a parent element.
• beforeUpdate: called before the element updates itself
• Updated - called after an element or its child elements have been updated.
• beforeUnmount: called before the element is unmounted.
• unmounted - called when the command is unmounted, only called once
  

Each hook function has the following parameters:

• el: The element to which the instruction is bound, which can be used to directly manipulate the DOM
• binding: data object, including the following attributes

instance: The instance of the current component. It is generally recommended that the instruction is independent of the component. If you need to use the component context ViewModel, you can get it from here
value: the value of the instruction, i.e. "yellow" in the example above
oldValue: The previous value of the instruction. In beforeUpdate and Updated, it can be the same as value.
arg: The argument passed to the instruction, such as click in v-on:click.
modifiers: An object containing modifiers. For example, v-on.stop:click can get an object of {stop:true}

• vnode: virtual node generated by Vue compilation,
• prevVNode: The previous virtual node during Update
  

Vue 2 Directive Upgrade

The directive is a Breaking Change in Vue3, and the name and number of the directive's hook functions have changed. Vue3 creates more functions for directives. The function names are consistent with the component lifecycle, which is easier to understand.

The following are the changes

Another change is the way the component context object is obtained. In general, it is recommended that instructions and component instances are independent of each other. If you access a component instance from within a custom instruction, it may mean that there is no need to encapsulate the instruction, and the instruction is the function of the component itself. But there may be some scenarios where you need to get a component instance.

Get by vnode parameter in Vue 2

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

Get it through binding parameters in Vue 3

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

Vue 3 custom directive example – input spell check

Here we use Plugin to inject instructions.

Create a new SpellCheckPlugin.ts, declare the plugin, and inject instructions into the plugin's install method

import { App } from 'vue'

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

 export default {
    install:SpellCheckMain
}

The SpellCheckMain method implements the component and the spell checking method. The specific spell checking rules can be implemented according to the business or using other plug-in methods.

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) {
        //Simulate spell checking, use other checking libraries here 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();
                }
            }
        }
    })
}

Using plugins in 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')

Just use the directive directly in the component

<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>

Combined with the use of SpreadJS, based on the function of checking the user's spelling input, the effect is as follows:

The above is the detailed summary of Vue 3 custom directive development. For more information about Vue 3 custom directive development, please pay attention to other related articles on 123WORDPRESS.COM!