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


Posted in Vue.js onJanuary 29, 2021

什么是指令(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?: 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上 ,基于检查用户拼写输入的功能,效果如下图:

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

以上就是Vue 3自定义指令开发的相关总结的详细内容,更多关于Vue 3自定义指令开发的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 #Vue.js
vue穿梭框实现上下移动
Jan 29 #Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
vscode自定义vue模板的实现
Jan 27 #Vue.js
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
python条件和循环的使用方法
2013/11/01 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python实现简单坦克大战
2020/03/27 Python
python进行参数传递的方法
2020/05/12 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
自我评价优秀范文分享
2013/11/30 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
质量承诺书范文
2014/03/27 职场文书
授权委托书格式
2014/07/31 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
家属答谢词
2015/01/05 职场文书
Python 阶乘详解
2021/10/05 Python
Java 数组的使用
2022/05/11 Java/Android
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS