support Alert
support Alert
This commit is contained in:
parent
2d5ba27837
commit
5d122b374c
12 changed files with 69 additions and 60 deletions
|
@ -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>
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
data () {
|
||||
return {
|
||||
currentValue: this.value
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue