blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[breaking change] Steps: rewrite

Browse Source
This commit is contained in:
陈嘉涵 2018-08-06 17:01:18 +08:00
parent 3434eb2ac7
commit 553628143d
13 changed files with 307 additions and 488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/app.wxss
View File

@ -10,6 +10,10 @@ page {
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif; font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
} }
.demo-margin-left {
margin-left: 10px;
}
.demo-margin-right { .demo-margin-right {
margin-right: 10px; margin-right: 10px;
} }

91
example/pages/steps/index.js
View File

@ -1,98 +1,29 @@
Page({ Page({
data: { data: {
active: 0,
steps: [ steps: [
{ {
current: true,
done: true,
text: '步骤一', text: '步骤一',
desc: '10.01' desc: '描述信息'
}, },
{ {
done: false,
current: false,
text: '步骤二', text: '步骤二',
desc: '10.02' desc: '描述信息'
}, },
{ {
done: false,
current: false,
text: '步骤三'
}
],
steps2: [
{
current: false,
done: true,
text: '步骤一',
desc: '10.01'
},
{
done: true,
current: true,
text: '步骤二',
desc: '10.02'
},
{
done: false,
current: false,
text: '步骤三', text: '步骤三',
desc: '10.03' desc: '描述信息'
}
],
steps3: [
{
current: false,
done: true,
text: '步骤一',
desc: '10.01'
}, },
{ {
done: true, text: '步骤四',
current: false, desc: '描述信息'
text: '步骤二',
desc: '10.02'
},
{
done: true,
current: true,
text: '步骤三',
desc: '10.03'
} }
],
steps4: [
{
current: true,
done: false,
text: '步骤一',
desc: '10.01'
},
{
done: false,
current: false,
text: '步骤二',
desc: '10.02'
}
],
steps5: [
{
done: true,
current: false,
text: '步骤一',
desc: '10.01'
},
{
done: false,
current: true,
text: '步骤二',
desc: '10.02'
}
] ]
}, },
onLoad() { nextStep() {
this.setData({
}, active: ++this.data.active % 4
});
onShow() { }
},
}); });

5
example/pages/steps/index.json
View File

@ -1,9 +1,8 @@
{ {
"navigationBarTitleText": "Steps 步骤条", "navigationBarTitleText": "Steps 步骤条",
"usingComponents": { "usingComponents": {
"van-cell": "../../dist/cell/index", "demo-block": "../../components/demo-block/index",
"van-cell-group": "../../dist/cell-group/index", "van-button": "../../dist/button/index",
"van-panel": "../../dist/panel/index",
"van-steps": "../../dist/steps/index" "van-steps": "../../dist/steps/index"
} }
} }

77
example/pages/steps/index.wxml
View File

@ -1,63 +1,18 @@
<van-panel title="基础用法"> <demo-block title="基础用法">
<van-cell-group> <van-steps
<van-cell> steps="{{ steps }}"
<van-steps type="horizon" steps="{{steps}}"></van-steps> active="{{ active }}"
</van-cell> custom-class="demo-margin-bottom"
<van-cell> />
<van-steps type="horizon" steps="{{steps2}}"></van-steps>
</van-cell>
<van-cell>
<van-steps type="horizon" steps="{{steps3}}"></van-steps>
</van-cell>
</van-cell-group>
</van-panel>
<van-panel title="2步完成"> <van-button custom-class="demo-margin-left" bind:tap="nextStep">下一步</van-button>
<van-cell-group> </demo-block>
<van-cell>
<van-steps type="horizon" steps="{{steps4}}"></van-steps>
</van-cell>
<van-cell>
<van-steps type="horizon" steps="{{steps5}}"></van-steps>
</van-cell>
</van-cell-group>
</van-panel>
<van-panel title="有描述的steps"> <demo-block title="竖向步骤条">
<van-cell-group> <van-steps
<van-cell> steps="{{ steps }}"
<van-steps type="horizon" hasDesc steps="{{steps}}"></van-steps> active="{{ active }}"
</van-cell> direction="vertical"
<van-cell> active-color="#f60"
<van-steps type="horizon" hasDesc steps="{{steps2}}"></van-steps> />
</van-cell> </demo-block>
<van-cell>
<van-steps type="horizon" hasDesc steps="{{steps3}}"></van-steps>
</van-cell>
</van-cell-group>
</van-panel>
<van-panel title="垂直方向的steps">
<van-cell-group>
<van-cell>
<van-steps type="vertical" hasDesc steps="{{steps}}"></van-steps>
</van-cell>
<van-cell>
<van-steps type="vertical" hasDesc steps="{{steps2}}"></van-steps>
</van-cell>
</van-cell-group>
</van-panel>
<van-panel title="自定义 class">
<van-cell-group>
<van-cell cell-class="gray">
<van-steps
steps-class="my-class"
icon-class="gray"
title-class="white"
type="horizon"
steps="{{steps}}"
></van-steps>
</van-cell>
</van-cell-group>
</van-panel>

11
example/pages/steps/index.wxss
View File

@ -1,11 +0,0 @@
.my-class {
margin: 20px;
}
.gray {
background-color: #ccc !important;
}
.white {
color: #fff !important;
}

4
packages/row/index.js
View File

@ -29,8 +29,8 @@ Component({
const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : ''; const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
this.setData({ style }); this.setData({ style });
this.getRelationNodes(COL_PATH).forEach(col => { this.getRelationNodes(COL_PATH).forEach((col) => {
col.setGutter(this.data.gutter) col.setGutter(this.data.gutter);
}); });
} }
} }

127
packages/steps/README.md
View File

@ -8,10 +8,8 @@
在 index.json 中引入组件 在 index.json 中引入组件
```json ```json
{ "usingComponents": {
"usingComponents": { "van-steps": "path/to/vant-weapp/dist/steps/index"
"van-steps": "path/to/vant-weapp/dist/steps/index"
}
} }
``` ```
@ -20,92 +18,59 @@
#### 基础用法 #### 基础用法
```html ```html
<van-steps type="horizon" steps="{{steps}}"></van-steps> <van-steps
steps="{{ steps }}"
active="{{ active }}"
/>
``` ```
#### 2步完成 ```javascript
Page({
```html data: {
<van-steps type="horizon" steps="{{steps}}"></van-steps> steps: [
{
text: '步骤一',
desc: '描述信息'
},
{
text: '步骤二',
desc: '描述信息'
},
{
text: '步骤三',
desc: '描述信息'
},
{
text: '步骤四',
desc: '描述信息'
}
]
}
});
``` ```
```js #### 竖向步骤条
steps: [ 可以通过设置`direction`属性来改变步骤条的显示方式
{
done: true,
current: false,
text: '步骤一',
desc: '10.01'
},
{
done: false,
current: true,
text: '步骤二',
desc: '10.02'
}
]
```
#### 有描述的steps
```html
<van-steps type="horizon" hasDesc steps="{{steps}}"></van-steps>
```
#### 垂直方向的steps
```html
<van-steps type="vertical" steps="{{steps}}"></van-steps>
```
#### 自定义 class
```html ```html
<van-steps <van-steps
steps-class="my-class" steps="{{ steps }}"
icon-class="gray" active="{{ active }}"
title-class="white" direction="vertical"
type="horizon" active-color="#f60"
steps="{{steps}}" />
></van-steps>
``` ```
### Steps API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| active | 当前步骤 | `Number` | 0 |
| direction | 显示方向，可选值为 `horizontal` `vertical` | `String` | `horizontal` |
| active-color | 激活状态颜色 | `String` | `#06bf04` |
| 参数 | 说明 | 类型 | 默认值 | 必须 | ### 外部样式类
|-----------|-----------|-----------|-------------|-------------|
| type | steps 的展示状态，可选值为 'horizon', 'vertical' | String | horizon | |
| hasDesc | 是否展示描述 | Boolean | false | |
| steps | 步骤条展示数据 | Array | | 必须 |
| steps-class | 自定义类，可改变steps外层样式 | String | | |
| icon-class | 自定义类，可改变icon样式 | String | | |
| title-class | 自定义类，可改变标题样式 | String | | |
| desc-class | 自定义类，可改变描述样式 | String | | |
steps 数据格式如下： | 类名 | 说明 |
```js |-----------|-----------|
[ | custom-class | 根节点样式类 |
{
// 此步骤是否当前完成状态
current: false,
// 此步骤是否已经完成
done: true,
// 此步骤显示文案
text: '步骤一',
// 此步骤描述语
desc: '10.01'
},
{
done: true,
current: false,
text: '步骤二',
desc: '10.02'
},
{
done: true,
current: true,
text: '步骤三',
desc: '10.03'
}
]
```

68
packages/steps/index.js
View File

@ -1,21 +1,61 @@
Component({ Component({
externalClasses: ['steps-class', 'icon-class', 'title-class', 'desc-class'], externalClasses: [
'custom-class',
],
properties: { properties: {
type: { icon: String,
type: String, steps: {
value: 'horizon'
},
hasDesc: {
type: Boolean,
value: false
},
steps: { // 必须
type: Array, type: Array,
value: [] observer() {
this.formatSteps();
}
},
active: {
type: Number,
observer() {
this.formatSteps();
}
},
direction: {
type: String,
value: 'horizontal'
},
activeColor: {
type: String,
value: '#06bf04'
}
},
attached() {
this.formatSteps();
},
methods: {
formatSteps() {
const { steps } = this.data;
const formattedSteps = steps.map((step, index) => {
return {
...step,
status: this.getStatus(index)
};
});
this.setData({
formattedSteps
});
}, },
className: String getStatus(index) {
const { active } = this.data;
if (index < active) {
return 'finish';
} else if (index === active) {
return 'process';
}
return '';
}
} }
}); });

5
packages/steps/index.json
View File

@ -1,3 +1,6 @@
{ {
"component": true "component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
} }

158
packages/steps/index.pcss
View File

@ -1,6 +1,158 @@
@import "wxss/step.pcss"; @import '../common/index.pcss';
@import "wxss/vstep.pcss";
.van-steps { .van-steps {
position: relative; overflow: hidden;
background-color: $white;
&--horizontal {
display: flex;
overflow: hidden;
position: relative;
padding: 10px 10px 15px;
}
&--vertical {
padding: 0 0 0 35px;
}
}
.van-step {
flex: 1;
font-size: 14px;
position: relative;
color: $gray-dark;
&--finish {
color: $text-color;
}
&__circle {
width: 5px;
height: 5px;
background-color: #999;
border-radius: 50%;
}
&--horizontal {
float: left;
padding-bottom: 10px;
&:first-child {
.van-step__title {
transform: none;
margin-left: 0;
}
}
&:last-child {
position: absolute;
right: 10px;
width: auto;
.van-step__title {
transform: none;
margin-left: 0;
text-align: right;
}
.van-step__circle-container {
left: auto;
right: -9px;
}
.van-step__line {
width: 0;
}
}
.van-step__circle-container {
position: absolute;
bottom: 0;
left: -8px;
padding: 0 8px;
background-color: $white;
z-index: 1;
}
.van-step__title {
font-size: 12px;
transform: translate3d(-50%, 0, 0);
display: inline-block;
margin-left: 3px;
}
.van-step__line {
position: absolute;
left: 0;
bottom: 2px;
width: 100%;
height: 1px;
background-color: $border-color;
}
&.van-step--process {
color: $text-color;
.van-step__circle-container {
bottom: -4px;
}
.van-step__active {
font-size: 12px;
color: $green;
display: block;
line-height: 1;
}
}
}
&--vertical {
font-size: 14px;
line-height: 18px;
padding: 10px 10px 10px 0;
&:not(:last-child)::after {
border-bottom-width: 1px;
}
&:first-child {
&::before {
content: '';
position: absolute;
width: 1px;
height: 20px;
background-color: $white;
top: 0;
left: -15px;
z-index: 1;
}
}
.van-step__active,
.van-step__circle {
z-index: 2;
position: absolute;
}
.van-step__active {
top: 12px;
left: -20px;
line-height: 1;
font-size: 12px;
}
.van-step__circle {
top: 16px;
left: -17px;
}
.van-step__line {
position: absolute;
top: 0;
left: -15px;
width: 1px;
height: 100%;
background-color: $border-color;
}
}
} }

21
packages/steps/index.wxml
View File

@ -1,13 +1,18 @@
<view class="steps-class van-steps van-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} van-steps--{{ steps.length }} {{ className }}"> <view class="custom-class van-steps van-steps--{{ direction }}">
<view <view
wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index" wx:for="{{ formattedSteps }}"
class="van-steps__step {{ hasDesc ? 'van-steps__step--db-title' : '' }} {{ index == 0 ? 'van-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'van-steps__step--last-child' : '' }} {{ step.done ? 'van-steps__step--done' : '' }} {{ step.current ? 'van-steps__step--cur' : '' }}" wx:key="index"
class="van-step van-hairline van-step--{{ direction }} {{ item.status ? 'van-step--' + item.status : '' }}"
style="{{ width ? 'width:' + width + 'px' : '' }}"
> >
<view class="van-steps__title title-class">{{ step.text }}</view> <view class="van-step__title" style="{{ item.status === 'process' ? 'color: ' + activeColor : '' }}">
<view wx:if="{{ hasDesc && step.desc }}" class="van-steps__title van-steps__title--desc desc-class">{{ step.desc }}</view> <view>{{ item.text }}</view>
<view class="van-steps__icons icon-class"> <view>{{ item.desc }}</view>
<view class="van-steps__circle"></view>
</view> </view>
<view class="van-steps__line"></view> <view class="van-step__circle-container">
<view class="van-step__circle" wx:if="{{ item.status !== 'process' }}" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
<van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" />
</view>
<view class="van-step__line" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
</view> </view>
</view> </view>

134
packages/steps/wxss/step.pcss
View File

@ -1,134 +0,0 @@
.van-steps--steps.van-steps--5 .van-steps__step {
width: 25%;
}
.van-steps--steps.van-steps--4 .van-steps__step {
width: 33%;
}
.van-steps--steps.van-steps--3 .van-steps__step {
width: 50%;
}
.van-steps--steps .van-steps__step {
position: relative;
float: left;
padding-bottom: 25px;
color: #b1b1b1;
width: 100%;
}
.van-steps--steps .van-steps__title {
transform: translateX(-50%);
font-size: 10px;
text-align: center;
}
.van-steps--steps .van-steps__icons {
position: absolute;
top: 30px;
left: -10px;
padding: 0 8px;
background-color: #fff;
z-index: 10;
}
.van-steps--steps .van-steps__circle {
display: block;
position: relative;
width: 5px;
height: 5px;
background-color: #e5e5e5;
border-radius: 50%;
}
.van-steps--steps .van-steps__line {
position: absolute;
left: 0px;
top: 32px;
width: 100%;
height: 1px;
background-color: #e5e5e5;
}
/* 已完成的steps */
.van-steps--steps .van-steps__step--done {
color: #333;
}
.van-steps--steps .van-steps__step--done .van-steps__line {
background-color: #06bf04;
}
.van-steps--steps .van-steps__step--done .van-steps__circle {
width: 5px;
height: 5px;
background-color: #09bb07;
}
/* 正在进行中的steps */
.van-steps--steps .van-steps__step--cur .van-steps__icons {
top: 25px;
left: -14px;
}
.van-steps--steps .van-steps__step--cur .van-steps__circle {
width: 13px;
height: 13px;
background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
background-size: 13px 13px;
}
.van-steps--steps .van-steps__step--cur .van-steps__line {
background-color: #e5e5e5;
}
/* 各种不同位置的 */
.van-steps--steps .van-steps__step--first-child .van-steps__title {
margin-left: 0;
transform: none;
text-align: left;
}
.van-steps--steps .van-steps__step--first-child .van-steps__icons {
left: -7px;
}
.van-steps--steps .van-steps__step--last-child {
position: absolute;
right: 0;
top: 0;
text-align: right;
}
.van-steps--steps .van-steps__step--last-child .van-steps__title {
transform: none;
text-align: right;
}
.van-steps--steps .van-steps__step--last-child .van-steps__icons {
left: auto;
right: -6px;
}
.van-steps--steps .van-steps__step--last-child .van-steps__line {
display: none;
}
/* 有描述的step */
.van-steps--steps .van-steps__step--db-title {
min-height: 29px;
}
.van-steps--steps .van-steps__step--db-title .van-steps__line {
top: 45px;
}
.van-steps--steps .van-steps__step--db-title .van-steps__icons {
top: 43px;
}
.van-steps--steps .van-steps__step--db-title.van-steps__step--cur .van-steps__icons {
top: 39px;
}

90
packages/steps/wxss/vstep.pcss
View File

@ -1,90 +0,0 @@
.van-steps--vsteps {
color: #999;
font-size: 14px;
}
.van-steps--vsteps .van-steps__step {
position: relative;
padding: 15px 0;
}
.van-steps--vsteps .van-steps__step--done {
color: #44BB00;
}
.van-steps--vsteps .van-steps__line {
position: absolute;
top: 0;
bottom: 0;
left: 7px;
width: 1px;
background-color: #e5e5e5;
}
.van-steps--vsteps .van-steps__title {
display: inline-block;
line-height: 20px;
padding-left: 27px;
}
.van-steps--vsteps .van-steps__title--desc {
padding-left: 3px;
}
.van-steps--vsteps .van-steps__icons {
position: absolute;
left: 7px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 3px 0;
background-color: #fff;
}
.van-steps--vsteps .van-steps__circle {
width: 5px;
height: 5px;
background-color: #e5e5e5;
border-radius: 10px;
}
.van-steps--vsteps .van-steps__step--done .van-steps__circle {
width: 5px;
height: 5px;
background-color: #09bb07;
}
.van-steps--vsteps .van-steps__step--cur .van-steps__circle {
width: 13px;
height: 13px;
background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
background-size: 13px 13px;
border-radius:0;
}
.van-steps--vsteps .van-steps__icon--active {
width: 13px;
height: 13px;
}
.van-steps--vsteps .van-steps__step--first-child .van-steps__title::before {
content: '';
position: absolute;
top: 0;
bottom: 50%;
left: 7px;
width: 1px;
background-color: #fff;
z-index: 1;
}
.van-steps--vsteps .van-steps__step--last-child .van-steps__title::after {
content: '';
position: absolute;
top: 50%;
bottom: 0%;
left: 7px;
width: 1px;
background-color: #fff;
z-index: 1;
}