您现在的位置是：网站首页> 编程资料编程资料

Vue.extend实现组件库message组件示例详解_vue.js_

2023-05-24 360人已围观

简介 Vue.extend实现组件库message组件示例详解_vue.js_

概述

当我们使用组件库的时候，某些组件并不是直接放到模板当中进行使用，而是通过api的方式调用生成组件并且挂在到我们的页面中，其中最常见的就是message组件，我们在组件库中看到的多数都是api调用的方式生成。记录自己基本实现message组件。

Vue.extend

在vue中，要实现通过api方式实现组件的使用，这个aip是必不可少的，因此我们先了解下这个全局api的用法，官网说的很晦涩难懂，我的理解就是通过参数传递一个配置对象（这个配置对象就是我们模板中export default的那个对象，例如data,methods,props等等）都可以传递，接下来该函数会根据我们的配置对象生成一个继承自Vue的子组件构造函数，然后我们就可以通过实例化构造函数，生成对应的组件，然后我们就可以挂载到页面了。

message 组件配置对象（就是.vue文件）

message 生成组件的函数

import MessageBoxOption from "./index.vue"; import Vue from "vue"; let messageBoxConstructor = Vue.extend({ ...MessageBoxOption, }); export default { install(Vue) { Vue.prototype.$Message = { instanceList: [], hide(types) { for (let instance of this.instanceList) { if (instance.types == types) { instance && document.body.removeChild(instance.$el) && Reflect.deleteProperty(this, types); } } }, success(message) { if (!this.vmSuccess) { let messageBox = new messageBoxConstructor({ propsData: { message, type: "success", top: (this.instanceList.length + 1) * 55, }, }); let $Message = messageBox.$mount(); this.vmSuccess = $Message; this.instanceList.push({ ...$Message, types: "vmSuccess" }); document.body.appendChild($Message.$el); setTimeout(() => { this.hide("vmSuccess"); }, 4000); } }, error(message) { if (!this.vmError) { let messageBox = new messageBoxConstructor({ propsData: { message, type: "error", top: (this.instanceList.length + 1) * 55, }, }); let $Message = messageBox.$mount(); this.vmError = $Message; this.instanceList.push({ ...$Message, types: "vmError" }); document.body.appendChild($Message.$el); setTimeout(() => { this.hide("vmError"); }, 6000); } }, }; }, };