vue项目中仿element-ui弹框

vue项目中仿element-ui弹框

最近要写个弹框，发现element-ui弹框样式还可以，就copy下来改吧改吧。也不分步骤详细介绍了直接上代码。

在组件目录中新建文件夹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

以上就是封装的所有代码
接下来就来看看如何引用

main.js中引入

import Message from '@/components/message/index.js'

Vue.prototype.$message = Message

调用

在你需要的页面调用

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

type为success

type为warning

type为info

type为errpr

小icon的图片用自己的图片哦

帮助到大家的点个喜欢 谢谢
会持续更新的哦 关注我