[breaking change] Steps: remove some prop

This commit is contained in:
陈嘉涵 2019-04-29 17:01:08 +08:00
parent e417ad0e8b
commit d3c8eb86e2
4 changed files with 8 additions and 62 deletions

View File

@ -31,11 +31,13 @@
### Step ### Step
- [ ] 移除 icon 属性 - [x] 移除 icon 属性
- [ ] 移除 title 属性 - [x] 移除 title 属性
- [ ] 移除 iconClass 属性 - [x] 移除 iconClass 属性
- [ ] 移除 description 属性 - [x] 移除 description 属性
- [ ] 移除 message-extra 插槽 - [x] 移除 message-extra 插槽
改动原因:步骤条顶部内容的通用性较低,不适合在组件内实现
### Badge ### Badge

View File

@ -1,16 +1,11 @@
import { use } from '../utils'; import { use } from '../utils';
import { GREEN } from '../utils/color'; import { GREEN } from '../utils/color';
import Icon from '../icon';
const [sfc, bem] = use('steps'); const [sfc, bem] = use('steps');
export default sfc({ export default sfc({
props: { props: {
icon: String,
title: String,
active: Number, active: Number,
iconClass: String,
description: String,
direction: { direction: {
type: String, type: String,
default: 'horizontal' default: 'horizontal'
@ -32,29 +27,9 @@ export default sfc({
}, },
render(h) { render(h) {
const { icon, title, description, slots } = this;
const StatusIcon = (slots('icon') || icon) && (
<div class={bem('icon')}>{slots('icon') || <Icon name={icon} class={this.iconClass} />}</div>
);
const StatusMessage = (
<div class={bem('message')}>
<div class={bem('title')}>{title}</div>
<div class={[bem('desc'), 'van-ellipsis']}>{description}</div>
</div>
);
return ( return (
<div class={bem([this.direction])}> <div class={bem([this.direction])}>
{(title || description) && ( <div class={bem('items')}>{this.slots()}</div>
<div class={bem('status')}>
{StatusIcon}
{StatusMessage}
{slots('message-extra')}
</div>
)}
<div class={bem('items', { alone: !title && !description })}>{slots()}</div>
</div> </div>
); );
} }

View File

@ -13,40 +13,10 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding-bottom: 22px; padding-bottom: 22px;
&.van-steps__items--alone {
padding-top: 10px;
}
} }
} }
&--vertical { &--vertical {
padding: 0 0 0 35px; padding: 0 0 0 35px;
} }
&__icon {
float: left;
margin-right: 10px;
}
.van-icon {
font-size: 40px;
}
&__message {
height: 40px;
margin: 15px 0;
}
&__title {
font-size: 14px;
color: @text-color;
padding-top: 4px;
}
&__desc {
font-size: 12px;
line-height: 1.5;
color: @gray-dark;
}
} }

View File

@ -73,7 +73,6 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
| active | 当前步骤 | `Number` | 0 | - | | active | 当前步骤 | `Number` | 0 | - |
| title | 顶部描述栏标题 | `String` | - | - |
| direction | 显示方向,可选值为 `vertical` | `String` | `horizontal` | - | | direction | 显示方向,可选值为 `vertical` | `String` | `horizontal` | - |
| active-icon | 激活状态底部图标,可选值见 Icon 组件 | `String` | `checked` | 1.6.9 | | active-icon | 激活状态底部图标,可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
| active-color | 激活状态颜色 | `String` | `#07c160` | - | | active-color | 激活状态颜色 | `String` | `#07c160` | - |