mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
step component
This commit is contained in:
cookfront
parent
3fa1e1021b
commit
8eff262e48
@ -2,3 +2,56 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 只显示步骤条
|
||||
|
||||
```html
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
```
|
||||
|
||||
|
||||
### Steps API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前激活的步骤，从0开始 | Number | '' | '' |
|
||||
| icon | 当前步骤的icon | string | '' | '' |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | string | '' | '' |
|
||||
| title | 当前步骤从标题 | string | '' | '' |
|
||||
| description | 当前步骤描述 | string | '' | '' |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
|
||||
@ -3,17 +3,52 @@
|
||||
<h1 class="page-title">Steps</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-steps icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货">
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
|
||||
<h2 class="page-sub-title">只显示步骤条</h2>
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.page-steps {
|
||||
.page-sub-title {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div class="zan-step">
|
||||
|
||||
<div class="zan-step" :class="`zan-step--${status}`">
|
||||
<div class="zan-step__circle-container">
|
||||
<i class="zan-step__circle" v-if="status !== 'process'"></i>
|
||||
<i class="zan-icon zan-icon-checked" v-else></i>
|
||||
</div>
|
||||
<p class="zan-step__title">
|
||||
<slot></slot>
|
||||
</p>
|
||||
<div class="zan-step__line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -8,8 +15,23 @@
|
||||
export default {
|
||||
name: 'zan-step',
|
||||
|
||||
props: {
|
||||
title: String
|
||||
beforeCreate() {
|
||||
this.$parent.steps.push(this);
|
||||
},
|
||||
|
||||
computed: {
|
||||
status() {
|
||||
let index = this.$parent.steps.indexOf(this);
|
||||
let active = this.$parent.active;
|
||||
|
||||
if (index === -1) {
|
||||
return '';
|
||||
} else if (index < active) {
|
||||
return 'finish';
|
||||
} else if (index === active) {
|
||||
return 'process';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<div class="zan-steps">
|
||||
<div class="zan-steps" :class="`zan-steps--${steps.length}`">
|
||||
<div class="zan-steps__status" v-if="icon">
|
||||
<i class="zan-icon" :class="computedIconClass"></i>
|
||||
<i class="zan-icon zan-steps__icon" :class="computedIconClass"></i>
|
||||
<div class="zan-steps__message">
|
||||
<div class="zan-steps__message-wrapper">
|
||||
<h4 class="zan-steps__title" v-text="title"></h4>
|
||||
<p class="zan-steps__desc" v-text="description"></p>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="message-extra">
|
||||
</slot>
|
||||
</div>
|
||||
<div class="zan-steps__items">
|
||||
<slot></slot>
|
||||
@ -38,6 +40,12 @@ export default {
|
||||
|
||||
return result;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
steps: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,25 +1,28 @@
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/ellipsis.css";
|
||||
|
||||
@component-namespace zan {
|
||||
@b steps {
|
||||
padding: 15px 0;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
|
||||
.zan-icon {
|
||||
@m 4 {
|
||||
.zan-step {
|
||||
width: 33.2%;
|
||||
}
|
||||
}
|
||||
|
||||
@e icon {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@e status {
|
||||
padding: 0 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@e message {
|
||||
display: table;
|
||||
height: 40px;
|
||||
padding-right: 50px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 15px 0;
|
||||
|
||||
.zan-steps__message-wrapper {
|
||||
display: table-cell;
|
||||
@ -34,7 +37,107 @@
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: $c-gray-dark;
|
||||
max-height: 18px;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
|
||||
@e items {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@b step {
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
position: relative;
|
||||
color: $c-gray-dark;
|
||||
|
||||
@m finish {
|
||||
color: $c-black;
|
||||
|
||||
.zan-step__circle,
|
||||
.zan-step__line {
|
||||
background-color: $c-green;
|
||||
}
|
||||
}
|
||||
|
||||
@m process {
|
||||
color: $c-black;
|
||||
|
||||
.zan-step__circle-container {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
font-size: 12px;
|
||||
color: $c-green;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.zan-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
|
||||
.zan-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.zan-step__circle-container {
|
||||
left: auto;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.zan-step__line {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-step__circle-container {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -8px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@e circle {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #888;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 12px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
@e line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $c-gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user