51 lines
1.2 KiB
Markdown
51 lines
1.2 KiB
Markdown
|
### Steps 步骤条
|
|||
|
|
|
|||
|
|
评分组件，组件名：``uni-steps``，代码块： uSteps。
|
|||
|
|
|
|||
|
|
**使用方式：**
|
|||
|
|
|
|||
|
|
在 ``script`` 中引用组件
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import uniSteps from "@/components/uni-steps/uni-steps.vue"
|
|||
|
|
export default {
|
|||
|
|
components: {uniSteps}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
基本用法
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<uni-steps :data="[
|
|||
|
|
{title: '事件一'},
|
|||
|
|
{title: '事件二'},
|
|||
|
|
{title: '事件三'},
|
|||
|
|
{title: '事件四'}]"
|
|||
|
|
:active="1">
|
|||
|
|
</uni-steps>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
纵向排列
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<uni-steps :data="[
|
|||
|
|
{title:'买家下单',desc:'2018-11-11'},
|
|||
|
|
{title:'卖家发货',desc:'2018-11-12'},
|
|||
|
|
{title:'买家签收',desc:'2018-11-13'},
|
|||
|
|
{title:'交易完成',desc:'2018-11-14'}]"
|
|||
|
|
direction="column"
|
|||
|
|
:active="2">
|
|||
|
|
</uni-steps>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
实际效果参考：[https://github.com/dcloudio/uni-ui](https://github.com/dcloudio/uni-ui)
|
|||
|
|
|
|||
|
|
**属性说明：**
|
|||
|
|
|
|||
|
|
|属性名|类型|默认值 |说明|
|
|||
|
|
|---|----|---|---|
|
|||
|
|
|data|Array<Object>|-|数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]|
|
|||
|
|
|active|Number|0|当前步骤|
|
|||
|
|
|direction|String|row|排列方向，可取值：row（横向）、column（纵向）|
|
|||
|
|
|active-color|String|#1aad19|选中状态的颜色|
|