前端开发小技巧 - 【Vue】 - 将 指令 / 组件 注册为插件（Vue2 + Vue3）

禁止摆烂_才浅
853 阅读6分钟

前言

  • 不管是 Vue3 还是 Vue2：
    • 指令一般都是写在 src/directives/index.js 文件中；
    • 通用型组件都是在 src/components 中；
  • 一个自定义指令由一个 包含类似组件生命 周期钩子函数 的 对象 来定义。钩子函数会收到指令所绑定元素作为其参数；

一、Vue3 注册方式

1.1、注册指令

1️.1.1、指令 钩子函数 介绍

const myDirective = {
    // 在绑定元素的 attribute 前 或 事件监听器应用前 调用
    created(el, binding, vnode, prevVnode) {
        // 下面会介绍各个参数的细节
    },
    
    // 在元素被插入到 DOM 前调用
    beforeMount(el, binding, vnode, prevVnode) {},
    
    // 在绑定元素的父组件 及 他自己的所有子节点都挂载完成后调用
    mounted(el, binding, vnode, prevVnode) {},
    
    // 绑定元素的父组件更新前调用
    beforeUpdate(el, binding, vnode, prevVnode) {},
    
    // 在绑定元素的父组件 及 他自己的所有子节点都更新后调用
    updated(el, binding, vnode, prevVnode) {},
    
    // 绑定元素的父组件卸载前调用
    beforeUnmount(el, binding, vnode, prevVnode) {},
    
    // 绑定元素的父组件卸载后调用
    unmounted(el, binding, vnode, prevVnode) {}
}

1.1.2、指令 钩子函数 参数 介绍

  • 指令的钩子会传递以下几种参数：
    • el：指令绑定到的元素。这可以用于直接操作 DOM。
    • binding：一个对象，包含以下属性。
      • value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
      • oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
      • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
      • modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
    • instance：使用该指令的组件实例。
    • dir：指令的定义对象。
  • vnode：代表绑定元素的底层 VNode。
  • prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

1.1.3️、定义指令 并进行 全局注册

  • 这里就写几个简单指令做个示范（开发中也能用到）：
    • 图片懒加载指令；
    • 图片显示异常时显示默认图片；
  • 目标文件：src/directives/index.js；
import { useIntersectionObserver } from '@vueuse/core';

// TODO 图片懒加载指令
export const imgLazyPlugin = {
    install (app) {
        // app.directive('指令名字', 指令配置对象);
        app.directive('img-lazy', {
            // mounted：指令的钩子函数
            // el：指令绑定的元素，此处指 img 标签
            // binding：binding.value 指令表达式的值，此处指图片的地址
            mounted (el, binding) {
                // useIntersectionObserver()：VueUse 中 检测 元素是否进入视口区域的函数
                // 该方法对元素的监听一直存在，存在内存浪费，除非手动停止
                // stop - 可以停止该函数对元素的监听
                const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
                    if (isIntersecting) {
                        el.src = binding.value;
                        // 当图片加载完毕后，停止对该元素的监听
                        stop();
                    };
                });
            };
        });
    }
};

// TODO 图片显示异常时，显示默认图片
export const imageErrPlugin = {
    install (app) {
        app.directive('img-err', {
            mounted (el, binding) {
                el.src = el.src || binding.value;
                // 只有 img 标签才可以使用
                if (el.target.tagName !== 'IMG') return;
                
                // 图片加载失败会触发 onerror 事件
                el.onerror = () => {
                    el.src = binding.value;
                };
            };
        });
    };
};

1.2、注册组件

  • 通用型组件都是放在 src/components 中的；
  • 如果需要将一些组件注册为插件使用【不需要导入，直接就可以使用，先进行全局注册，再注册为插件】，可以在 src/components 下新建 index.js 文件；
  • 将需要注册的组件，导入到这个 index.js 文件中，进行全局注册；
  • 举例：
    • 先进行全局注册：
      • 目标文件：src/components/index.js
      import AVue from './AVue.vue';
import BVue from './BVue.vue';

export default {
    install (app) {
        // app.component('组件名字', 组件配置对象（也就是导入的组件）)
        app.component('AVue', AVue);
        app.component('BVue', BVue);
    };
};

1.3、将 指令 / 组件 注册为 插件

  • 目标文件：src/main.js；
/**
* 创建一个 Vue3 应用
* 1. 导入 createApp 函数
* 2.编写一个根组件 App.vue 导入到 main.js 中
* 3.基于根组件创建应用实例
* 4.挂载到 index.html 的 #app 容器
**/

// 从 vue 中导入 createApp 函数
import { createApp } from 'vue';

// 导入 根组件 App.vue
import App from './App.vue';

// TODO 将所有的指令进行导入，统一注册
// 此处的 directivesPlugin 是个对象
import * as directivesPlugin from '@/directives';

import componentPlugin from '@/component';

// 通过 createApp() 创建 应用实例
const app = createApp(App);

// mount()，将应用实例渲染在容器元素里面
app.mount('#app');

// TODO 注册全局指令插件
Object.keys(directivesPlugin).forEach(item => {
    app.use(directivesPlugin[item]);
};

// TODO 注册全局组件插件
app.use(componentPlugin);

二、Vue2 注册方式

2.1、注册指令

2.1.1、指令钩子 函数 介绍

  • 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
    • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
    • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind：只调用一次，指令与元素解绑时调用。

2.1.2、指令 钩子函数 参数 介绍

  • 指令钩子函数会被传入以下参数：
    • el：指令所绑定的元素，可以用来直接操作 DOM。
    • binding：一个对象，包含以下 property：
      • name：指令名，不包括 v- 前缀。
      • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
      • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
      • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
      • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
    • vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
    • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  • 🔺 注意： 除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

2.1.3、定义指令

  • 目标文件：src.directives/index.js：
// 负责管理所有的自定义指令
// 只负责导出指令对象
// 变量名称就是指令名称
export const imageerror = {
  // 指令内容
  // 指令作用在 图片上的 dom是图片对象
  // inserted 在Vue3中也改名 => mounted
  inserted(dom, options) {
    // inserted执行的之后 此时 并没有对 src赋值
    // 图片有地址 但是地址加载图片失败的时候 会执行一个函数  onerror
    dom.src = dom.src || options.value
    dom.onerror = function() {
      // 监听onerror事件
      // options.value就是指令传过来的值
      dom.src = options.value // 当图片异常的时候 接收指令传过来的值 让这个值作为头像的备选
    }
    // 只有src有值 并且加载失败才会触发onerror
  },
  // 此钩子会在给image赋值之后执行
  // 这个钩子函数在Vue3中改名了 => updated
  componentUpdated(dom, options) {
    dom.src = dom.src || options.value
  }
}

// 自定义全屏指令
export const fullSscreen = {
  inserted(dom, options) { 
   dom.addEventListener('click', () => {
      if (dom.tagName !== 'BUTTON') {
      return
      }
      // 判断是否处于全屏状态
    if (document.fullscreen) {
      return document.exitFullscreen()
    }
    document.documentElement.requestFullscreen()
    })
  },
}

// 自定义打印指令
export const printNb = {
  inserted(dom, options) {
    dom.addEventListener('click', () => {
      console.log(options)
      let body = document.body.innerHTML  // 保存原来的 页面的内容
      document.body.innerHTML = document.querySelector(`#${options.value.id}`).innerHTML // 打印我们需要的内容部分
      window.print()
      document.body.innerHTML=body // 打印后在还原为原来的内容
    })
  }
}

2.2、注册组件

import AVue from './AVue.vue';
import BVue from './BVue.vue';

export default {
  install(Vue) {
    Vue.component('AVue', AVue);
    Vue.component('BVue', BVue);
  }
};

2.3、将 指令 / 组件 注册为插件

import Vue from 'vue'
import App from './App'

import store from './store'
import router from './router'

import * as directives from '@/directives'

import Components from '@/components'

import '@/permission' // permission control

// directives是所有指令的一个集合
Object.keys(directives).forEach(key => {
  // key就是指令名称
  Vue.directive(key, directives[key])
})

Vue.use(Components) // 注册自己的自定义组件

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
avatar
文章
阅读
粉丝