vue项目中仿element-ui弹框效果的实例代码

最近要写个弹框，发现

element-ui

在组件目录中新建文件夹

message

我把message目录里的东西给大家贴出来

message文件夹

src文件夹

index.js

import Message from './src/main.js';
export default Message;

mian.js

import Vue from 'vue';
import Main from './main.vue';
let MessageConstructor = Vue.extend(Main);
let instance;
let instances = [];
let seed = 1;
const Message = (options = {}) => {
 if (typeof options === 'string') {
 options = {
  message: options
 };
 }
 let userOnClose = options.onClose;
 let id = 'message_' + seed++;
 options.onClose = function() {
 Message.close(id, userOnClose);
 };
 instance = new MessageConstructor({
 data: options
 });
 instance.id = id;
 instance.vm = instance.$mount();
 document.body.appendChild(instance.vm.$el);
 instance.vm.visible = true;
 instance.dom = instance.vm.$el;
 instance.dom.style.zIndex = 999;
 instances.push(instance);
 return instance.vm;
}
['success', 'warning', 'info', 'error'].forEach(type => {
 Message[type] = options => {
 if (typeof options === 'string') {
  options = {
  message: options
  };
 }
 options.type = type;
 return Message(options);
 };
});
Message.close = function(id, userOnClose) {
 for (let i = 0, len = instances.length; i < len; i++) {
 if (id === instances[i].id) {
  if (typeof userOnClose === 'function') {
  userOnClose(instances[i]);
  }
  instances.splice(i, 1);
  break;
 }
 }
};
Message.closeAll = function() {
 for (let i = instances.length - 1; i >= 0; i--) {
 instances[i].close();
 }
};
export default Message;

mian.vue

<template>
 <transition name="message-fade">
  <div :class="[
   'message',
   type && !iconClass ? `message-${ type }` : '',
   center ? 'center' : '',
   showClose ? 'closable' : '',
   customClass
   ]"
    v-show="visible"
    @mouseenter="clearTimer"
    @mouseleave="startTimer">
   <i :class="iconClass" v-if="iconClass"></i>
   <i :class="typeClass" v-else></i>
   <slot>
    <p v-if="!dangerouslyUseHTMLString" class="message-content">{{ message }}</p>
    <p v-else v-html="message" class="message-content"></p>								 
 1/3    1 2 3 下一页 尾页