support Alert

support Alert
This commit is contained in:
梁灏 2017-03-02 11:50:02 +08:00
parent 2d5ba27837
commit 5d122b374c
12 changed files with 69 additions and 60 deletions

View file

@ -1,18 +1,20 @@
<template>
<div v-if="!closed" :class="wrapClasses" transition="fade">
<span :class="iconClasses" v-if="showIcon">
<slot name="icon">
<Icon :type="iconType"></Icon>
</slot>
</span>
<span :class="messageClasses"><slot></slot></span>
<span :class="descClasses" v-el:desc><slot name="desc"></slot></span>
<a :class="closeClasses" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
</div>
<transition name="fade">
<div v-if="!closed" :class="wrapClasses">
<span :class="iconClasses" v-if="showIcon">
<slot name="icon">
<Icon :type="iconType"></Icon>
</slot>
</span>
<span :class="messageClasses"><slot></slot></span>
<span :class="descClasses"><slot name="desc"></slot></span>
<a :class="closeClasses" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
</div>
</transition>
</template>
<script>
import Icon from '../icon';
@ -40,7 +42,7 @@
banner: {
type: Boolean,
default: false
},
}
},
data () {
return {
@ -99,8 +101,8 @@
this.$emit('on-close', e);
}
},
compiled () {
this.desc = this.$els.desc.innerHTML != '';
mounted () {
this.desc = this.$slots.desc !== undefined;
}
};
</script>

View file

@ -30,7 +30,7 @@
data () {
return {
currentValue: this.value
}
};
},
computed: {
wrapClasses () {

View file

@ -2,7 +2,7 @@
import 'core-js/fn/array/find-index';
import Affix from './components/affix';
// import Alert from './components/alert';
import Alert from './components/alert';
// import BackTop from './components/back-top';
// import Badge from './components/badge';
// import Breadcrumb from './components/breadcrumb';
@ -48,7 +48,7 @@ import locale from './locale';
const iview = {
Affix,
// Alert,
Alert,
// BackTop,
// Badge,
// Breadcrumb,

View file

@ -1,11 +1,11 @@
.ease-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
.@{className}-enter-active, .@{className}-appear {
opacity: 0;
animation-timing-function: linear;
animation-duration: @transition-time;
}
.@{className}-leave {
.@{className}-leave-active {
animation-timing-function: linear;
animation-duration: @transition-time;
}

View file

@ -1,10 +1,10 @@
.fade-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
.@{className}-enter-active, .@{className}-appear {
opacity: 0;
animation-timing-function: linear;
}
.@{className}-leave {
.@{className}-leave-active {
animation-timing-function: linear;
}
}

View file

@ -4,19 +4,19 @@
}
.make-motion(@className, @keyframeName) {
.@{className}-enter, .@{className}-appear {
.@{className}-enter-active, .@{className}-appear {
.motion-common();
animation-play-state: paused;
}
.@{className}-leave {
.@{className}-leave-active {
.motion-common();
animation-play-state: paused;
}
.@{className}-enter, .@{className}-appear {
.@{className}-enter-active, .@{className}-appear {
animation-name: ~"@{keyframeName}In";
animation-play-state: running;
}
.@{className}-leave {
.@{className}-leave-active {
animation-name: ~"@{keyframeName}Out";
animation-play-state: running;
}

View file

@ -1,10 +1,10 @@
.move-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
.@{className}-enter-active, .@{className}-appear {
opacity: 0;
animation-timing-function: @ease-in-out;
}
.@{className}-leave {
.@{className}-leave-active {
animation-timing-function: @ease-in-out;
}
}

View file

@ -1,10 +1,10 @@
.slide-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
.@{className}-enter-active, .@{className}-appear {
opacity: 0;
animation-timing-function: @ease-in-out;
}
.@{className}-leave {
.@{className}-leave-active {
animation-timing-function: @ease-in-out;
}
}