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操作

   注意事项：

   • 钩子函数会被传入一下参数：
     1. el: 指令所绑定的元素
     2. binding: 参数对象，里面有个常用的属性value，对应的属性值就是你通过自定义指令赋值传入的数据
     3. vnode: vue编译生成的虚拟dom节点
     4. 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) || "";
         }
       });
     }
   };