Vue自定义插件以及指令

Vue自定义插件以及指令

Vue提供了强大的插件注入功能来增强vue

定义

// myPlugin.ts
import moment from "moment";
import {
          
    PluginObject } from "vue/types/umd";

export const myPlugin: PluginObject<any> = {
          
   
  install(vue, options) {
          
   
      console.log(vue, options) // Vue构造函数 “MY_PLUGIN”
    vue.prototype.$moment = (time: moment.MomentInput) =>
      moment(time).format("YYYY-MM-DD HH:ss:mm");
  },
};

vue官方文档说明道，插件对象必须包含install方法（因为使用vue.use注册插件的时候会调用，并传入vue这个类或者说构造函数，然后vue.use方法第二个参数可以传入options）

注册

import {
          
    myPlugin } from "./utils/plugins";

Vue.use(myPlugin, "My-PLUGIN");

使用

<template>
  <div class="main-container note-detail">
    <h1>{
         
  { $moment(new Date()) }}</h1>
  </div>
</template>

在插件里面自定义指令

在vue中，除了vue原本自带的指令之外我们还可以自定义指令，例如现在我们需要自定义一个指令v-t，目的就是将用到这个指令的元素的innerText用vue-i18n去翻译：

1. 创建插件customPlugin.js
2. 在插件的install方法中注册自定义指令v-t export const customPlugin = { install(vue) { vue.directive("t", { inserted() { } }); } }; 注意：vue.directive方法第一个值就是指令名字（vue代码声明叫做指令id），第二个参数是配置项： 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用。（有详细解释以及使用说明）
3. 在配置项的钩子函数中添加自己的dom操作 注意事项： 钩子函数会被传入一下参数： el: 指令所绑定的元素 binding: 参数对象，里面有个常用的属性value，对应的属性值就是你通过自定义指令赋值传入的数据 vnode: vue编译生成的虚拟dom节点 oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。 然后根据我们的需求在钩子函数中做操作: inserted(el, { value }) { el.innerText = vue.prototype.$t(value) || ""; }, 然后在代码中使用该指令： <a-button type="primary" size="small" v-t="dataCollection.sendCommand"></a-button> 这样这个a-button组件的innerText会是$t方法通过对字符串dataCollection.sendCommand翻译后的结果。 如果你遇到了语言改变但是页面没改变的问题，就需要在directive配置项中再配置update钩子重新对该字符串进行翻译然后展示在页面上。 export const customPlugin = { install(vue) { vue.directive("t", { inserted(el, { value }) { el.innerText = vue.prototype.$t(value) || ""; }, update(el, { value }) { el.innerText = vue.prototype.$t(value) || ""; } }); } };