mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[breaking change] Steps: remove some prop
This commit is contained in:
parent
e417ad0e8b
commit
d3c8eb86e2
@ -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
|
||||||
|
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -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` | - |
|
||||||
|
Loading…
x
Reference in New Issue
Block a user