From 553628143d8f1ae1b890dcc44d66438749c8106a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 6 Aug 2018 17:01:18 +0800 Subject: [PATCH] [breaking change] Steps: rewrite --- example/app.wxss | 4 + example/pages/steps/index.js | 91 +++---------------- example/pages/steps/index.json | 5 +- example/pages/steps/index.wxml | 77 ++++------------ example/pages/steps/index.wxss | 11 --- packages/row/index.js | 4 +- packages/steps/README.md | 127 ++++++++++---------------- packages/steps/index.js | 68 +++++++++++--- packages/steps/index.json | 5 +- packages/steps/index.pcss | 158 ++++++++++++++++++++++++++++++++- packages/steps/index.wxml | 21 +++-- packages/steps/wxss/step.pcss | 134 ---------------------------- packages/steps/wxss/vstep.pcss | 90 ------------------- 13 files changed, 307 insertions(+), 488 deletions(-) delete mode 100644 packages/steps/wxss/step.pcss delete mode 100644 packages/steps/wxss/vstep.pcss 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; -}