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

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

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;

<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>   </slot>   <i v-if="showClose" class="message-close-btn icon-close" @click="close"></i>  </div> </transition></template><script> const typeMap = { success: 'success', info: 'info', warning: 'warning', error: 'error' }; export default { data () {  return {  visible: false,  message: '',  duration: 1000,  type: 'info',  iconClass: '',  customClass: '',  onClose: null,  showClose: false,  closed: false,  timer: null,  dangerouslyUseHTMLString: false,  center: false  } }, computed: {  typeClass() {  return this.type && !this.iconClass   ? `message-icon icon-${ typeMap[this.type] }`   : '';  } }, watch: {  closed(newVal) {  if (newVal) {   this.visible = false;   this.$el.addEventListener('transitionend', this.destroyElement);  }  } }, methods: {  destroyElement() {  this.$el.removeEventListener('transitionend', this.destroyElement);  this.$destroy(true);  this.$el.parentNode.removeChild(this.$el);  },  close() {  this.closed = true;  if (typeof this.onClose === 'function') {   this.onClose(this);  }  },  clearTimer() {  clearTimeout(this.timer);  },  startTimer() {  if (this.duration > 0) {   this.timer = setTimeout(() => {   if (!this.closed) {    this.close();   }   }, this.duration);  }  },  keydown(e) {  if (e.keyCode === 27) { // esc关闭消息   if (!this.closed) {   this.close();   }  }  } }, mounted() {  this.startTimer();  document.addEventListener('keydown', this.keydown); }, beforeDestroy() {  document.removeEventListener('keydown', this.keydown); } }</script><style lang="less"> .message {  min-width: 200px;  box-sizing: border-box;  border-radius: 3px;  border: 1px solid #ebeef5;  position: fixed;  left: 50%;  top: 20px;  transform: translateX(-50%);  background-color: #edf2f3;  transition: opacity 0.3s, transform .4s;  overflow: hidden;  padding: 10px;  display: flex;  align-items: center; } .message-icon{  width: 15px;  height: 15px;  border-radius: 100%;  background: #fff;  display: inline-block;  margin-right: 10px;  &.icon-success{   background: url("../../../assets/image/icon-success.png") no-repeat center center;   background-size: auto 100%;  }  &.icon-error{   background: url("../../../assets/image/icon-error.png") no-repeat center center;   background-size: auto 100%;  }  &.icon-info{   background: url("../../../assets/image/icon-info.png") no-repeat center center;   background-size: auto 100%;  }  &.icon-warning{   background: url("../../../assets/image/icon-warning.png") no-repeat center center;   background-size: auto 100%;  } } .message-success{  background: #f2f8ec;  border-color: #e4f2da;  .message-content{   color: #7ebe50;  } } .message-error{  background: #fcf0f0;  border-color: #f9e3e2;  .message-content{   color: #e57470;  } } .message-warning{  background: #fcf6ed;  border-color: #f8ecda;  .message-content{   color: #dca450;  } } .message-info{  background: #eef2fb;  border-color: #ebeef4;  .message-content{   color: #919398;  } } .message-fade-enter, .message-fade-leave-active {  opacity: 0;  transform: translate(-50%, -100%); }</style>

this.$message({  message: '提示消息',  type:'error' //type有四个值 1.error 2.success 3.info 4.warning});