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