mirror of https://github.com/ElemeFE/element
89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<transition name="el-notification-fade">
|
||
|
|
<div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
|
||
|
|
<i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
|
||
|
|
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
|
||
|
|
<span>{{ title }}</span>
|
||
|
|
<p>{{ message }}</p>
|
||
|
|
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script type="text/babel">
|
||
|
|
let typeMap = {
|
||
|
|
success: 'circle-check',
|
||
|
|
info: 'information',
|
||
|
|
warning: 'warning',
|
||
|
|
error: 'circle-cross'
|
||
|
|
};
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
visible: false,
|
||
|
|
title: '',
|
||
|
|
message: '',
|
||
|
|
duration: 4500,
|
||
|
|
type: '',
|
||
|
|
onClose: null,
|
||
|
|
|
||
|
|
closed: false,
|
||
|
|
top: null,
|
||
|
|
timer: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
typeClass() {
|
||
|
|
return this.type ? `el-icon-${ typeMap[this.type] }` : '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
closed(newVal) {
|
||
|
|
if (newVal) {
|
||
|
|
this.visible = false;
|
||
|
|
this.$el.addEventListener('transitionend', () => {
|
||
|
|
this.$destroy(true);
|
||
|
|
this.$el.parentNode.removeChild(this.$el);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleClose() {
|
||
|
|
this.closed = true;
|
||
|
|
if (typeof this.onClose === 'function') {
|
||
|
|
this.onClose();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clearTimer() {
|
||
|
|
clearTimeout(this.timer);
|
||
|
|
},
|
||
|
|
|
||
|
|
startTimer() {
|
||
|
|
if (this.duration > 0) {
|
||
|
|
this.timer = setTimeout(() => {
|
||
|
|
if (!this.closed) {
|
||
|
|
this.handleClose();
|
||
|
|
}
|
||
|
|
}, this.duration);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
if (this.duration > 0) {
|
||
|
|
this.timer = setTimeout(() => {
|
||
|
|
if (!this.closed) {
|
||
|
|
this.handleClose();
|
||
|
|
}
|
||
|
|
}, this.duration);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|