如何创建一个类似于element-ui的Message组件-白红宇

1、场景

公司一直使用vue+element-ui来进行项目的开发，因此以前的信息提示弹出框一直使用element-ui的Message组件，然而，此次的项目拿到UI的设计图。

发现并不是很契合element-ui。因此决定自己封装一个全局的message组件。方便随时调用。

2、组件的创建

创建messageTips.vue文件，组件中代码如下：


    复制代码

给Vue的原型上添加$messageTips方法。

使用$mount挂在参数，并对参数进行判断，同时将组件插入页面中。新建messageTips.js文件代码如下，

import Vue from 'vue'import MessageTips from './messageTips.vue'Vue.prototype.$messageTips = (options) => {  //options为调用时的传入的参数  if (options === undefined) {    throw new Error('messageTips未传入提示信息')  } else if (typeof options === 'string' || typeof options === 'number') {    options = {      message: options    }  } else if (typeof options === 'object') {    options = options  }  let message = Vue.extend(MessageTips)  let component = new message({    data: options  }).$mount()  document.body.appendChild(component.$el)  Vue.nextTick(() => {    component.show = true  })}MessageTips.install = (vue) => {  vue.component(MessageTips.name, MessageTips)}export default MessageTips复制代码

在main.js中引入并全局挂载

import MessageTips from '@/myComponents/MessageTips'Vue.use(MessageTips)复制代码

至此一个简单的信息提示弹出框组件已经创建完毕。

3、组件的使用

一个简单的使用测试如下：