mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-16 11:44:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

update alert and notification

Browse Source
This commit is contained in:
Leopoldthecoder
2016-08-11 10:40:34 +08:00
parent 300f0a7d33
commit dcffbbbe0d
6 changed files with 50 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/notification/src/main.js
View File

@@ -19,7 +19,8 @@ var Notification = function(options) {
});
instance.id = id;
instance.vm = instance.$mount();
instance.vm.$appendTo('body');
document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el;
var topDist = 0;
@@ -46,7 +47,7 @@ Notification.close = function(id, userOnClose) {
if (len > 1) {
for (i = index; i < len - 1 ; i++) {
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 10 + 'px';
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
}
}
};

29
packages/notification/src/main.vue
View File

@@ -1,12 +1,14 @@
<template>
<div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
<i class="el-notification__icon el-icon-{{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>
<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>
</div>
</transition>
</template>
<script type="text/babel">
@@ -18,10 +20,9 @@
};
export default {
name: 'ElNotification',
data() {
return {
visible: false,
title: '',
message: '',
duration: 4500,
@@ -36,14 +37,18 @@
computed: {
typeClass() {
return this.type ? typeMap[this.type] : '';
return this.type ? `el-icon-${ typeMap[this.type] }` : '';
}
},
watch: {
closed(newVal) {
if (newVal) {
this.$destroy(true);
this.visible = false;
this.$el.addEventListener('transitionend', () => {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
});
}
}
},
@@ -71,7 +76,7 @@
}
},
ready() {
mounted() {
if (this.duration > 0) {
this.timer = setTimeout(() => {
if (!this.closed) {