• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
法克鱿吧吧sw 显示全部楼层 发表于 2021-10-25 20:48:24 |阅读模式 打印 上一主题 下一主题
什么是指令(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不直接交互。
  1. <p v-highlight="'yellow'">Highlight this text bright yellow</p>
复制代码
多组件可用的通用操作,通过使用组件(Component)可以很好的实现复用,同样通过使用组件也可以实现功能在组件上的复用。例如拼写查抄、图片懒加载。使用组件,只要在需要拼写查抄的输入组件上加上标签,遍可为组件注入拼写查抄的功能,无需再针对差异组件封装新的支持拼写功能呢。
Vue 3如何自定义指令


Vue支持全局注册和局部注册指令。
全局注册注册通过app实例的directive方法进行注册。
  1. let app = createApp(App)
  2. app.directive('highlight', {
  3. beforeMount(el, binding, vnode) {
  4. el.style.background = binding.value
  5. }
  6. })
复制代码
局部注册通过给组件设置directive属性注册
  1. export default defineComponent({
  2. name: "WebDesigner",
  3. components: {
  4. Designer,
  5. },
  6. directives: {
  7. highlight: {
  8. beforeMount(el, binding, vnode) {
  9. el.style.background = binding.value;
  10. },
  11. },
  12. },
  13. });
复制代码
注册组件包罗组件的名字,需要唯一和组件的一个实现对象,组册后即可在任何元素上使用了。
  1. <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 2中通过vnode参数获取
  1. bind(el, binding, vnode) {
  2.   const vm = vnode.context
  3. }
复制代码
在Vue 3中 通过binding参数获取
  1. mounted(el, binding, vnode) {
  2.   const vm = binding.instance
  3. }
复制代码
Vue 3 自定义指令实例 – 输入拼写查抄


这里使用Plugin的方式注入指令。
新建SpellCheckPlugin.ts,声明插件,在插件的install方法中注入指令
  1. import { App } from 'vue'
  2.  
  3. function SpellCheckMain(app: App, options: any) {
  4. //
  5. }
  6.  
  7. export default {
  8.     install: SpellCheckMain
  9. }
复制代码
SpellCheckMain方法实现组件以及,拼写查抄方法,详细拼写查抄规则可以根据业务大概使用其他插件方法实现
  1. function SpellCheckMain(app: App, options: any) {
  2.     const SpellCheckAttribute = "spell-check-el";
  3.  
  4.     let SpellCheckTimer: Map<string, number> = new Map();
  5.     let checkerId = 0;
  6.     function checkElement(el: HTMLElement) {
  7.         let attr = el.getAttribute(SpellCheckAttribute);
  8.         if (attr) {
  9.             clearTimeout(SpellCheckTimer.get(attr));
  10.             let timer = setTimeout(() => { checkElementAsync(el) }, 500);
  11.             SpellCheckTimer.set(attr, timer)
  12.         }
  13.     }
  14.     function checkText(words?: string | null): [string?] {
  15.         if (!words) {
  16.             return [];
  17.         }
  18.         let errorWordList: [string?] = [];
  19.         try {
  20.             let wordsList = words.match(/[a-zA-Z]+/ig);
  21.             wordsList?.forEach((word) => {
  22.                 if (!checkWord(word)) {
  23.                     errorWordList.push(word);
  24.                 }
  25.             })
  26.         }
  27.         catch {
  28.  
  29.         }
  30.         return errorWordList;
  31.     }
  32.     function checkWord(text: string) {
  33.         //模拟拼写检查,这里使用其他检查库
  34.         return text.length > 6 ? false : true;
  35.     }
  36.     function checkElementAsync(el: HTMLElement) {
  37.  
  38.         let text = (el as HTMLInputElement).value || el.innerText;
  39.         let result = checkText(text);
  40.  
  41.         let attr = el.getAttribute(SpellCheckAttribute);
  42.         if (!attr) {
  43.             return;
  44.         }
  45.  
  46.         if (result && result.length) {
  47.             el.style.background = "pink"
  48.             let div = document.getElementById(attr);
  49.             if (!div) {
  50.                 div = document.createElement("div");
  51.                 div.id = attr;
  52.                 div.style.position = "absolute"
  53.                 div.style.top = "0px"
  54.                 div.style.left = el.clientWidth + "px"
  55.  
  56.                 if (el.parentElement) {
  57.                     el.parentElement.style.position = "relative"
  58.                     if (el.parentElement.lastChild === el) {
  59.                         el.parentElement.appendChild(div);
  60.                     }
  61.                     else {
  62.                         el.parentElement.insertBefore(div, el.nextSibling);
  63.                     }
  64.                 }
  65.             }
  66.             div.innerHTML = result.length.toString() + " - " + result.join(",");
  67.         } else {
  68.             el.style.background = "";
  69.  
  70.             let div = document.getElementById(attr);
  71.             if (div) {
  72.                 div.innerHTML = ""
  73.             }
  74.         }
  75.  
  76.         console.log(result)
  77.     }
  78.  
  79.     app.directive('spell-check', {
  80.         created() {
  81.             console.log("created", arguments)
  82.         },
  83.         mounted: function (el, binding, vnode, oldVnode) {
  84.  
  85.             console.log("mounted", arguments)
  86.             //set checker id for parent
  87.             let attr = "spellcheck-" + (checkerId++);
  88.             el.setAttribute(SpellCheckAttribute, attr);
  89.             console.log("attr", attr)
  90.  
  91.             if (el.tagName.toUpperCase() === "DIV") {
  92.                 el.addEventListener("blur", function () {
  93.                     checkElement(el)
  94.                 }, false);
  95.             }
  96.             if (el.tagName.toUpperCase() === "INPUT") {
  97.                 el.addEventListener("keyup", function () {
  98.                     checkElement(el)
  99.                 }, false);
  100.             }
  101.             // el.addEventListener("focus", function () {
  102.             //     checkElement(el)
  103.             // }, false);
  104.         },
  105.         updated: function (el) {
  106.             console.log("componentUpdated", arguments)
  107.             checkElement(el);
  108.         },
  109.         unmounted: function (el) {
  110.             console.log("unmounted", arguments)
  111.  
  112.             let attr = el.getAttribute(SpellCheckAttribute);
  113.             if (attr) {
  114.                 let div = document.getElementById(attr);
  115.                 if (div) {
  116.                     div.remove();
  117.                 }
  118.             }
  119.         }
  120.     })
  121. }
复制代码
main.ts中使用插件  
  1. /// <reference path="./vue-app.d.ts" />
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4. import router from './router'
  5. import SpellCheckPlugin  from './plugins/SpellCheckPlugin'
  6.  
  7. let app = createApp(App)
  8. app.use(SpellCheckPlugin)
  9. app.use(router).mount('#app')
复制代码
组件中直接使用指令即可
  1. <template>
  2.   <div ref="ssHost" style="width: 100%; height: 600px"></div>
  3.   <div><div ref="fbHost" spell-check v-spell-check="true" contenteditable="true" spellcheck="false" style="border: 1px solid #808080;width:600px;"></div></div>
  4.   <div><input v-model="value1" v-spell-check spellcheck="false" style="width:200px;" /></div>
  5. </template>
复制代码
联合在使用SpreadJS上 ,基于查抄用户拼写输入的功能,效果如下图:

以上就是Vue 3自定义指令开发的相干总结的详细内容,更多关于Vue 3自定义指令开发的资料请关注脚本之家其它相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作