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

[refactor] steps:升级为自定义组件 (#192)

Browse Source
This commit is contained in:
nrz 2018-04-14 11:40:31 +08:00 committed by Yao
parent db8d40d1bb
commit 0d751548bb
6 changed files with 55 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,6 @@
{
"navigationBarTitleText": "Steps 步骤条"
"navigationBarTitleText": "Steps 步骤条",
"usingComponents": {
"zan-steps": "../../dist/steps/index"
}
}

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

@ -7,19 +7,19 @@
<view class="zan-panel">
<view class="zan-cell">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'horizon', steps: steps }}"></template>
<zan-steps type="horizon" steps="{{steps}}"></zan-steps>
</view>
</view>
<view class="zan-cell">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
<zan-steps type="horizon" steps="{{steps2}}"></zan-steps>
</view>
</view>
<view class="zan-cell zan-cell--last-child">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
<zan-steps type="horizon" steps="{{steps3}}"></zan-steps>
</view>
</view>
</view>
@ -28,19 +28,19 @@
<view class="zan-panel">
<view class="zan-cell">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
<zan-steps type="horizon" hasDesc steps="{{steps}}"></zan-steps>
</view>
</view>
<view class="zan-cell">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
<zan-steps type="horizon" hasDesc steps="{{steps2}}"></zan-steps>
</view>
</view>
<view class="zan-cell zan-cell--last-child">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
<zan-steps type="horizon" hasDesc steps="{{steps3}}"></zan-steps>
</view>
</view>
</view>
@ -49,13 +49,13 @@
<view class="zan-panel">
<view class="zan-cell zan-cell">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
<zan-steps type="vertical" hasDesc steps="{{steps}}"></zan-steps>
</view>
</view>
<view class="zan-cell zan-cell--last-child">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'vertical', steps }}"></template>
<zan-steps type="vertical" steps="{{steps}}"></zan-steps>
</view>
</view>
</view>
@ -63,7 +63,7 @@
<view class="zan-panel-title">可自定义class</view>
<view class="zan-panel">
<view class="zan-cell__bd">
<template is="zan-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
<zan-steps type="vertical" steps="{{steps}}" className="my-class"></zan-steps>
</view>
</view>

13
packages/steps/README.md
View File

@ -6,15 +6,18 @@
@import "path/to/zanui-weapp/dist/index.wxss";
```
在需要使用的页面里引入组件库模板和脚本
```html
<import src="path/to/zanui-weapp/dist/steps/index.wxml" />
```
在 index.json 中引入组件
```json
{
"usingComponents": {
"zan-steps": "path/to/zanui-weapp/dist/steps/index"
}
}
### 代码演示
在模板中使用 zan-steps 模板，并传入相应数据
```html
<template is="zan-steps" data="{{ type: 'horizon', steps }}"></template>
<zan-steps type="horizon" steps="{{steps}}"></zan-steps>
```
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|

20
packages/steps/index.js Normal file
View File

@ -0,0 +1,20 @@
Component({
properties: {
type: {
type: String,
value: 'horizon'
},
hasDesc: {
type: Boolean,
value: false
},
steps: { // 必须
type: Array,
value: []
},
className: String
}
})

3
packages/steps/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"component": true
}

24
packages/steps/index.wxml
View File

@ -1,15 +1,13 @@
<template name="zan-steps">
<view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
<view
wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
>
<view class="zan-steps__title">{{ step.text }}</view>
<view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
<view class="zan-steps__icons">
<view class="zan-steps__circle"></view>
</view>
<view class="zan-steps__line"></view>
<view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
<view
wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
>
<view class="zan-steps__title">{{ step.text }}</view>
<view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
<view class="zan-steps__icons">
<view class="zan-steps__circle"></view>
</view>
<view class="zan-steps__line"></view>
</view>
</template>
</view>