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组件简易模拟实现购物车
Dec 21 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 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
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python 监控logcat关键字功能
2020/09/04 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
EJB实例的生命周期
2016/10/28 面试题
创业计划书之淘宝网店
2019/10/08 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript
Promise静态四兄弟实现示例详解
2022/07/07 Javascript