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

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

最近要写个弹框，发现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的图片用自己的图片哦

总结

以上所述是小编给大家介绍的vue项目中仿element-ui弹框效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！