极乐门资源网

Vue 3自定义指令开发的相关总结
网络编程 2024/11/15 佚名
2 0
极乐门资源网 Design By www.ioogu.com

什么是指令（directive）

在Angular和Vue中都有Directive的概念，我们通常讲Directive 翻译为“指令”。

在计算机技术中，指令是由指令集架构定义的单个的CPU操作。在更广泛的意义上，“指令”可以是任何可执行程序的元素的表述，例如字节码。

那么在前端框架Vue中“指令”到底是什么，他有什么作用呢？

 在Vue开发中我们在模板中经常会使用v-model和v-show等以v-开头的关键字，这些关键字就是Vue框架内置的指令。通过使用v-model，可以获取实现DOM和数据的绑定；使用v-show，可以控制DOM元素显示。简而言之通过使用这些模板上的标签，让框架对DOM元素进行了指定的处理，同时DOM改变后框架可以同时更新指定数据。指令是Vue MVVM的基础之一。

指令的使用场景

除了使用内置的指令，Vue同样支持自定义指令，以下场景可以考虑通过自定义指令实现：

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 3自定义指令开发的相关总结

另一个变化是组件上下文对象的获取方式发生了变化。一般情况下推荐指令和组件实例相互独立，从自定义指令内部去访问组件实例，那可能说明这里不需要封装指令，指令就是组件本事的功能。但是可能的确有某些场景需要去获取组件实例。

在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"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上 ，基于检查用户拼写输入的功能，效果如下图：

Vue 3自定义指令开发的相关总结

以上就是Vue 3自定义指令开发的相关总结的详细内容，更多关于Vue 3自定义指令开发的资料请关注其它相关文章！

标签：
vue3,自定义指令,vue3,自定义指令开发
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“Vue 3自定义指令开发的相关总结”

暂无Vue 3自定义指令开发的相关总结的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com