diff --git a/example/app.wxss b/example/app.wxss
index 6c09fd3b..ebd5a030 100644
--- a/example/app.wxss
+++ b/example/app.wxss
@@ -10,6 +10,10 @@ page {
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
}
+.demo-margin-left {
+ margin-left: 10px;
+}
+
.demo-margin-right {
margin-right: 10px;
}
diff --git a/example/pages/steps/index.js b/example/pages/steps/index.js
index 724f5dc1..5f3d9480 100644
--- a/example/pages/steps/index.js
+++ b/example/pages/steps/index.js
@@ -1,98 +1,29 @@
Page({
data: {
+ active: 0,
steps: [
{
- current: true,
- done: true,
text: '步骤一',
- desc: '10.01'
+ desc: '描述信息'
},
{
- done: false,
- current: false,
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: '步骤三',
- desc: '10.03'
- }
- ],
- steps3: [
- {
- current: false,
- done: true,
- text: '步骤一',
- desc: '10.01'
+ desc: '描述信息'
},
{
- done: true,
- current: false,
- text: '步骤二',
- desc: '10.02'
- },
- {
- done: true,
- current: true,
- text: '步骤三',
- desc: '10.03'
+ text: '步骤四',
+ desc: '描述信息'
}
- ],
- 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() {
-
- },
-
- onShow() {
- },
+ nextStep() {
+ this.setData({
+ active: ++this.data.active % 4
+ });
+ }
});
diff --git a/example/pages/steps/index.json b/example/pages/steps/index.json
index b40af3e2..fc4f830c 100644
--- a/example/pages/steps/index.json
+++ b/example/pages/steps/index.json
@@ -1,9 +1,8 @@
{
"navigationBarTitleText": "Steps 步骤条",
"usingComponents": {
- "van-cell": "../../dist/cell/index",
- "van-cell-group": "../../dist/cell-group/index",
- "van-panel": "../../dist/panel/index",
+ "demo-block": "../../components/demo-block/index",
+ "van-button": "../../dist/button/index",
"van-steps": "../../dist/steps/index"
}
}
diff --git a/example/pages/steps/index.wxml b/example/pages/steps/index.wxml
index 3e795cdb..74748cef 100644
--- a/example/pages/steps/index.wxml
+++ b/example/pages/steps/index.wxml
@@ -1,63 +1,18 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
+ 下一步
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/example/pages/steps/index.wxss b/example/pages/steps/index.wxss
index 3991d239..e69de29b 100644
--- a/example/pages/steps/index.wxss
+++ b/example/pages/steps/index.wxss
@@ -1,11 +0,0 @@
-.my-class {
- margin: 20px;
-}
-
-.gray {
- background-color: #ccc !important;
-}
-
-.white {
- color: #fff !important;
-}
diff --git a/packages/row/index.js b/packages/row/index.js
index 2f5999e9..93a7345b 100644
--- a/packages/row/index.js
+++ b/packages/row/index.js
@@ -29,8 +29,8 @@ Component({
const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
this.setData({ style });
- this.getRelationNodes(COL_PATH).forEach(col => {
- col.setGutter(this.data.gutter)
+ this.getRelationNodes(COL_PATH).forEach((col) => {
+ col.setGutter(this.data.gutter);
});
}
}
diff --git a/packages/steps/README.md b/packages/steps/README.md
index 99f4622d..30a6b630 100644
--- a/packages/steps/README.md
+++ b/packages/steps/README.md
@@ -8,10 +8,8 @@
在 index.json 中引入组件
```json
-{
- "usingComponents": {
- "van-steps": "path/to/vant-weapp/dist/steps/index"
- }
+"usingComponents": {
+ "van-steps": "path/to/vant-weapp/dist/steps/index"
}
```
@@ -20,92 +18,59 @@
#### 基础用法
```html
-
+
```
-#### 2步完成
-
-```html
-
+```javascript
+Page({
+ data: {
+ steps: [
+ {
+ text: '步骤一',
+ desc: '描述信息'
+ },
+ {
+ text: '步骤二',
+ desc: '描述信息'
+ },
+ {
+ text: '步骤三',
+ desc: '描述信息'
+ },
+ {
+ text: '步骤四',
+ desc: '描述信息'
+ }
+ ]
+ }
+});
```
-```js
-steps: [
- {
- done: true,
- current: false,
- text: '步骤一',
- desc: '10.01'
- },
- {
- done: false,
- current: true,
- text: '步骤二',
- desc: '10.02'
- }
-]
-```
-
-#### 有描述的steps
-
-```html
-
-```
-
-#### 垂直方向的steps
-
-```html
-
-```
-
-#### 自定义 class
+#### 竖向步骤条
+可以通过设置`direction`属性来改变步骤条的显示方式
```html
+ steps="{{ steps }}"
+ active="{{ active }}"
+ direction="vertical"
+ active-color="#f60"
+/>
```
+### 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
-[
- {
- // 此步骤是否当前完成状态
- current: false,
- // 此步骤是否已经完成
- done: true,
- // 此步骤显示文案
- text: '步骤一',
- // 此步骤描述语
- desc: '10.01'
- },
- {
- done: true,
- current: false,
- text: '步骤二',
- desc: '10.02'
- },
- {
- done: true,
- current: true,
- text: '步骤三',
- desc: '10.03'
- }
-]
-```
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
diff --git a/packages/steps/index.js b/packages/steps/index.js
index a4956108..2de81e88 100644
--- a/packages/steps/index.js
+++ b/packages/steps/index.js
@@ -1,21 +1,61 @@
Component({
- externalClasses: ['steps-class', 'icon-class', 'title-class', 'desc-class'],
+ externalClasses: [
+ 'custom-class',
+ ],
+
properties: {
- type: {
- type: String,
- value: 'horizon'
- },
-
- hasDesc: {
- type: Boolean,
- value: false
- },
-
- steps: { // 必须
+ icon: String,
+ steps: {
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 '';
+ }
}
});
diff --git a/packages/steps/index.json b/packages/steps/index.json
index 467ce294..0a336c08 100644
--- a/packages/steps/index.json
+++ b/packages/steps/index.json
@@ -1,3 +1,6 @@
{
- "component": true
+ "component": true,
+ "usingComponents": {
+ "van-icon": "../icon/index"
+ }
}
diff --git a/packages/steps/index.pcss b/packages/steps/index.pcss
index 0f03bc50..0e469633 100644
--- a/packages/steps/index.pcss
+++ b/packages/steps/index.pcss
@@ -1,6 +1,158 @@
-@import "wxss/step.pcss";
-@import "wxss/vstep.pcss";
+@import '../common/index.pcss';
.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;
+ }
+ }
}
diff --git a/packages/steps/index.wxml b/packages/steps/index.wxml
index cd0b160f..5c39b968 100644
--- a/packages/steps/index.wxml
+++ b/packages/steps/index.wxml
@@ -1,13 +1,18 @@
-
+
- {{ step.text }}
- {{ step.desc }}
-
-
+
+ {{ item.text }}
+ {{ item.desc }}
-
+
+
+
+
+
diff --git a/packages/steps/wxss/step.pcss b/packages/steps/wxss/step.pcss
deleted file mode 100644
index 5d66ea70..00000000
--- a/packages/steps/wxss/step.pcss
+++ /dev/null
@@ -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;
-}
diff --git a/packages/steps/wxss/vstep.pcss b/packages/steps/wxss/vstep.pcss
deleted file mode 100644
index 165cf80d..00000000
--- a/packages/steps/wxss/vstep.pcss
+++ /dev/null
@@ -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;
-}