Vue项目里如何实现类似Element-UI的弹框效果？

本文共计1058个文字，预计阅读时间需要5分钟。

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

在组件目录中新建文件夹message，我把message目录里的东西给大 家贴出来：

javascript {{ title }} {{ content }}

.message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background-color: #fff; border: 1px solid #ccc; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}

.message-box { border-radius: 4px; overflow: hidden;}

.message-title { font-size: 16px; font-weight: bold; padding: 10px; background-color: #f5f5f5;}

.message-content { padding: 10px;}

.message-footer { text-align: right; padding: 10px;}

button { padding: 5px 10px; border: none; background-color: #409eff; color: #fff; cursor: pointer;}

button:hover { background-color: #367ce1;}

最近要写个弹框，发现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弹框效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！