使用vue自定义简单的消息提示框

<style scoped>
/** 弹窗动画*/
a {
text-decoration: none
} .drop-enter-active {
/* 动画进入过程：0.5s */
transition: all 0.5s ease;
} .drop-leave-active {
/* 动画离开过程：0.5s */
transition: all 0.3s ease;
} .drop-enter {
/* 动画之前的位置 */
transform: translateY(-500px);
} .drop-leave-active {
/* 动画之后的位置 */
transform: translateY(-500px);
} /* 盒子显示 */ .message-dialog-display {
display: flex;
justify-content: center;
} /* 文本显示 */ .message-dialog-text {
text-align: center;
} /* 内容样式 */ .message-dialog-align {
align-content: center;
align-items: center;
} /* 最外层 设置position定位 */ .message-dialog {
position: relative;
font-size: 1rem;
} /* 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩 */ .message-dialog-cover {
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
} /* 内容层 z-index要比遮罩大，否则会被遮盖 */ .message-dialog-content {
position: fixed;
top: 35%;
flex-direction: column;
z-index: 300;
/* left: 2rem; */
width: 99%
} .message-dialog-header {
/* 头部title的背景 居中圆角等属性。
没有图片就把background-image注释掉 */
/* background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); */
width: 86%;
height: 43px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: #fbfbfb;
border-bottom: 0.01rem solid #fbfbfb
} .message-dialog-main {
/* 主体内容样式设置 */
background: #ffffff;
width: 86%;
padding: 1rem 0 1rem 0;
} .message-dialog-footer {
width: 86%;
height: 40px;
} .message-dialog-btn {
width: 100%;
height: 100%;
background: #fbfbfb;
position: relative;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
line-height: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 0.01rem solid #fbfbfb
} .message-dialog-sure a {
display: inline-block;
cursor: pointer;
background: #d6d6d6;
width: 4rem;
text-align: center;
height: 2rem;
line-height: 2rem;
border-radius: 0.2rem;
margin: 0 1rem;
} .message-dialog-close {
width: 100%;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
text-align: center;
} .message-dialog-close a {
display: inline-block;
width: 100%;
height: 100%;
} .message-dialog-close a:hover {
color: aqua
}
</style>
@* <message-dialog :options.sync="options" v-on:close="close" :show.sync="showMessage" v-on:confirm="confirm" v-on:cancel="cancel"></message-dialog> *@
<template id="message_dialog">
<div class="message-dialog">
<div class="message-dialog-cover" v-if="myShow"></div>
<transition name="drop">
<div class="message-dialog-content message-dialog-display message-dialog-align"
v-bind:style="{width:myOptions.width+'%',left:myOptions.leftWidth+'%',top:myOptions.topDistance+'%'}"
v-if="myShow">
<div class="message-dialog-header message-dialog-text message-dialog-display message-dialog-align" v-if="myOptions.title">
<div>{{myOptions.title}}</div>
</div>
<div class="message-dialog-main message-dialog-text message-dialog-display message-dialog-align" v-bind:style="setStyle">
<div v-html="myOptions.content"></div>
</div>
<div class="message-dialog-footer" v-if="!myOptions.autoClose">
<div class="message-dialog-btn">
<div class="message-dialog-sure" v-if="myOptions.confirm">
<a v-on:click.stop="confirmed">确定</a>
<a v-on:click.stop="cancel">取消</a>
</div>
<div class="message-dialog-close" v-else>
<a v-on:click.stop="close">关闭</a>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<template id="message-modal">
<div>
<message-dialog :options.sync="options" v-on:close="close" :show.sync="showMessage" v-on:confirm="confirm"
v-on:cancel="cancel"></message-dialog>
</div>
</template>
<script type="text/javascript">
Vue.component("message-dialog", {
template: '#message_dialog',
props: {
'options': {
type: Object,
default: () => {
return {};
}
},
'show': {
type: Boolean,
default: false
}
},
data() {
return {
timers: [],
myOptions: this.options,
myShow: this.show
};
},
methods: {
confirmed(e) {
this.$emit('confirm',e);
},
cancel() {
this.$emit('cancel');
},
close() {
this.$emit('close');
},
autoClose() {
if (this.myOptions.autoClose) {
const t = setTimeout(() => {
this.close();
}, this.myOptions.showTime || 3000);
this.timers.push(t);
}
} },
computed: {
setStyle() {
if (this.myOptions.autoClose && this.myOptions.title) {
return {
borderBottomLeftRadius: 10 + 'px',
borderBottomRightRadius: 10 + 'px',
};
} else {
if (!this.myOptions.title) {
return {
borderTopLeftRadius: 10 + 'px',
borderTopRightRadius: 10 + 'px',
};
}
}
}
},
watch: {
options() {
this.myOptions = this.options;
this.timers.forEach(timer => {
window.clearTimeout(timer);
});
this.timers = [];
this.autoClose();
},
show(value) {
this.myShow = value;
}
},
mounted() { },
}); var messageDialog = new Vue({
el: '#message',
template: "#message-modal",
data: {
options: {},
showMessage: false,
func: ""
},
methods: {
show: function (msg, title, issure, autoClose, showTime) {
if (!msg) {
return this;
}
this.options = {
content: msg,
title: title,
autoClose: autoClose,
showTime: showTime || 3000,
confirm: issure
};
this.showMessage = true;
return this;
},
showMsg: function (msg, autoClose, showTime) {
return this.show(msg, null, false, autoClose, showTime);
},
showHeaderMsg: function (title, msg, autoClose, showTime) {
return this.show(msg, title, false, autoClose, showTime);
},
showConfirm: function (title, msg, func) {
this.func = func;
return this.show(msg, title, true);
},
close: function () {
this.showMessage = false;
},
confirm: function (envent) {
if (this.func && this.func instanceof Function) {
this.func(envent, this);
}
this.showMessage = false;
},
cancel: function () {
this.showMessage = false;
}
}
});
</script>