mirror of https://github.com/ElemeFE/element
update alert and notification
Leopoldthecoder
parent
300f0a7d33
commit
dcffbbbe0d
|
|
@ -74,12 +74,12 @@
|
|||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -99,18 +99,18 @@
|
|||
## 带有 icon
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click="open2">成功</el-button>
|
||||
<el-button :plain="true" v-on:click="open3">警告</el-button>
|
||||
<el-button :plain="true" v-on:click="open4">消息</el-button>
|
||||
<el-button :plain="true" v-on:click="open5">错误</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" v-on:click="open2">成功</el-button>
|
||||
<el-button :plain="true" v-on:click="open3">警告</el-button>
|
||||
<el-button :plain="true" v-on:click="open4">消息</el-button>
|
||||
<el-button :plain="true" v-on:click="open5">错误</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -154,12 +154,12 @@
|
|||
|
||||
## 不会自动关闭
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -179,12 +179,12 @@
|
|||
|
||||
## 回调函数
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
|
||||
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible">
|
||||
<i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i>
|
||||
<div class="el-alert__content">
|
||||
<span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span>
|
||||
<p class="el-alert__description" v-if="description">{{ description }}</p>
|
||||
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
|
||||
<transition name="el-alert-fade">
|
||||
<div class="el-alert" :class="[ typeClass ]" v-show="visible">
|
||||
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
|
||||
<div class="el-alert__content">
|
||||
<span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
|
||||
<p class="el-alert__description" v-if="description">{{ description }}</p>
|
||||
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
|
|
@ -60,6 +62,10 @@
|
|||
},
|
||||
|
||||
computed: {
|
||||
typeClass() {
|
||||
return `el-alert--${ this.type }`;
|
||||
},
|
||||
|
||||
iconClass() {
|
||||
return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
color: #fff;
|
||||
opacity: 1;
|
||||
display: table;
|
||||
transition: opacity .2s;
|
||||
|
||||
@modifier success {
|
||||
background-color: #13ce66;
|
||||
|
|
@ -78,12 +79,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.el-alert-fade-transition {
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
.el-alert-fade-enter,
|
||||
.el-alert-fade-leave {
|
||||
.el-alert-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.el-notification-fade-leave {
|
||||
.el-notification-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue