drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Alert

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -35,7 +35,7 @@
- [ ] Rate
- [ ] Upload
- [ ] Form
- [ ] Alert
- [x] Alert
- [ ] Card
- [ ] Message
- [ ] Notice

36
src/components/alert/alert.vue
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>

2
src/components/switch/switch.vue
View file

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

4
src/index.js
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,

4
src/styles/animation/ease.less
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;
}

4
src/styles/animation/fade.less
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;
}
}

8
src/styles/animation/index.less
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;
}

4
src/styles/animation/move.less
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;
}
}

4
src/styles/animation/slide.less
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;
}
}

1
test/app.vue
View file

@ -22,6 +22,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<li><router-link to="/steps">Steps</router-link></li>
<li><router-link to="/timeline">Timeline</router-link></li>
<li><router-link to="/switch">Switch</router-link></li>
<li><router-link to="/alert">Alert</router-link></li>
</ul>
</nav>
<router-view></router-view>

4
test/main.js
View file

@ -52,6 +52,10 @@ const router = new VueRouter({
{
path: '/switch',
component: require('./routers/switch.vue')
},
{
path: '/alert',
component: require('./routers/alert.vue')
}
]
});

56
test/routers/alert.vue
View file

@ -1,33 +1,35 @@
<template>
<Alert show-icon banner closable>消息提示文案</Alert>
<Alert type="success" show-icon>成功提示文案</Alert>
<Alert type="warning" show-icon banner>警告提示文案</Alert>
<Alert type="error" show-icon>错误提示文案</Alert>
<Alert show-icon>
消息提示文案
<template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
</Alert>
<Alert type="success" show-icon>
成功提示文案
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
</Alert>
<Alert type="warning" show-icon>
警告提示文案
<template slot="desc">
警告的提示描述文案警告的提示描述文案警告的提示描述文案
</template>
</Alert>
<Alert type="error" show-icon>
错误提示文案
<span slot="desc">
<div>
<Alert show-icon banner closable>消息提示文案</Alert>
<Alert type="success" show-icon>成功提示文案</Alert>
<Alert type="warning" show-icon banner>警告提示文案</Alert>
<Alert type="error" show-icon>错误提示文案</Alert>
<Alert show-icon>
消息提示文案
<template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
</Alert>
<Alert type="success" show-icon>
成功提示文案
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
</Alert>
<Alert type="warning" show-icon>
警告提示文案
<template slot="desc">
警告的提示描述文案警告的提示描述文案警告的提示描述文案
</template>
</Alert>
<Alert type="error" show-icon>
错误提示文案
<span slot="desc">
自定义错误描述文案。
</span>
</Alert>
<Alert show-icon>
自定义图标
<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
</Alert>
</Alert>
<Alert show-icon closable>
自定义图标
<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
</Alert>
</div>
</template>
<script>
import { Alert, Icon } from 'iview';