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