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 - [ ] Rate
- [ ] Upload - [ ] Upload
- [ ] Form - [ ] Form
- [ ] Alert - [x] Alert
- [ ] Card - [ ] Card
- [ ] Message - [ ] Message
- [ ] Notice - [ ] Notice

36
src/components/alert/alert.vue
View file

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

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

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

4
src/index.js
View file

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

4
src/styles/animation/ease.less
View file

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

4
src/styles/animation/fade.less
View file

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

8
src/styles/animation/index.less
View file

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

4
src/styles/animation/move.less
View file

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

4
src/styles/animation/slide.less
View file

@ -1,10 +1,10 @@
.slide-motion(@className, @keyframeName) { .slide-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName); .make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear { .@{className}-enter-active, .@{className}-appear {
opacity: 0; opacity: 0;
animation-timing-function: @ease-in-out; animation-timing-function: @ease-in-out;
} }
.@{className}-leave { .@{className}-leave-active {
animation-timing-function: @ease-in-out; 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="/steps">Steps</router-link></li>
<li><router-link to="/timeline">Timeline</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="/switch">Switch</router-link></li>
<li><router-link to="/alert">Alert</router-link></li>
</ul> </ul>
</nav> </nav>
<router-view></router-view> <router-view></router-view>

4
test/main.js
View file

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

56
test/routers/alert.vue
View file

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