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

<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>

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

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的图片用自己的图片哦

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