乐趣区

关于chrome-devtools:Vue-3自定义指令开发

什么是指令(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;

},

},

},

});

注册组件蕴含组件的名字,须要惟一和组件的一个实现对象,组册后即可在任何元素上应用了。

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 参数获取

bind(el, binding, vnode) {

        const vm = vnode.context        

}

在 Vue 3 中 通过 binding 参数获取

mounted(el, binding, vnode) {

        const vm = binding.instance        

}

Vue 3 自定义指令实例 – 输出拼写查看
这里应用 Pluginwww.sangpi.com 的形式注入指令。

新建 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 上,基于检查用户拼写输出的性能,成果如下图:

以上就是 Vue3 自定义指令开发的局部玩法介绍,大家如果晓得更多的应用办法欢送通过留言分享进去。

退出移动版