mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: Steps component
This commit is contained in:
chenjiahan
parent
e8d190d51d
commit
4500e71f1a
88
src-next/step/index.js
Normal file
88
src-next/step/index.js
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import { createNamespace } from '../utils';
|
||||||
|
import { BORDER } from '../utils/constant';
|
||||||
|
import { ChildrenMixin } from '../mixins/relation';
|
||||||
|
import Icon from '../icon';
|
||||||
|
|
||||||
|
const [createComponent, bem] = createNamespace('step');
|
||||||
|
|
||||||
|
export default createComponent({
|
||||||
|
mixins: [ChildrenMixin('vanSteps')],
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
status() {
|
||||||
|
if (this.index < this.parent.active) {
|
||||||
|
return 'finish';
|
||||||
|
}
|
||||||
|
if (this.index === +this.parent.active) {
|
||||||
|
return 'process';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
active() {
|
||||||
|
return this.status === 'process';
|
||||||
|
},
|
||||||
|
|
||||||
|
lineStyle() {
|
||||||
|
if (this.status === 'finish' && this.parent.activeColor) {
|
||||||
|
return {
|
||||||
|
background: this.parent.activeColor,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
genCircle() {
|
||||||
|
const { activeIcon, activeColor, inactiveIcon } = this.parent;
|
||||||
|
|
||||||
|
if (this.active) {
|
||||||
|
return this.$slots['active-icon'] ? (
|
||||||
|
this.$slots['active-icon']()
|
||||||
|
) : (
|
||||||
|
<Icon
|
||||||
|
class={bem('icon', 'active')}
|
||||||
|
name={activeIcon}
|
||||||
|
color={activeColor}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inactiveIcon || this.$slots['inactive-icon']) {
|
||||||
|
return this.$slots['inactive-icon'] ? (
|
||||||
|
this.$slots['inactive-icon']()
|
||||||
|
) : (
|
||||||
|
<Icon class={bem('icon')} name={inactiveIcon} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <i class={bem('circle')} style={this.lineStyle} />;
|
||||||
|
},
|
||||||
|
|
||||||
|
onClickStep() {
|
||||||
|
this.parent.$emit('click-step', this.index);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { status, active } = this;
|
||||||
|
const { activeColor, direction } = this.parent;
|
||||||
|
|
||||||
|
const titleStyle = active && { color: activeColor };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={[BORDER, bem([direction, { [status]: status }])]}>
|
||||||
|
<div
|
||||||
|
class={bem('title', { active })}
|
||||||
|
style={titleStyle}
|
||||||
|
onClick={this.onClickStep}
|
||||||
|
>
|
||||||
|
{this.$slots.default?.()}
|
||||||
|
</div>
|
||||||
|
<div class={bem('circle-container')} onClick={this.onClickStep}>
|
||||||
|
{this.genCircle()}
|
||||||
|
</div>
|
||||||
|
<div class={bem('line')} style={this.lineStyle} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
151
src-next/step/index.less
Normal file
151
src-next/step/index.less
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
@import '../style/var';
|
||||||
|
|
||||||
|
.van-step {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
color: @step-text-color;
|
||||||
|
font-size: @step-font-size;
|
||||||
|
|
||||||
|
&__circle {
|
||||||
|
display: block;
|
||||||
|
width: @step-circle-size;
|
||||||
|
height: @step-circle-size;
|
||||||
|
background-color: @step-circle-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__line {
|
||||||
|
position: absolute;
|
||||||
|
background-color: @step-line-color;
|
||||||
|
transition: background-color @animation-duration-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--horizontal {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
.van-step__title {
|
||||||
|
margin-left: 0;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
position: absolute;
|
||||||
|
right: 1px;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
.van-step__title {
|
||||||
|
margin-left: 0;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-step__circle-container {
|
||||||
|
right: -9px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-step__circle-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: -@padding-xs;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 0 @padding-xs;
|
||||||
|
background-color: @white;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-step__title {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 3px;
|
||||||
|
font-size: @step-horizontal-title-font-size;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
|
||||||
|
@media (max-width: 321px) {
|
||||||
|
font-size: @step-horizontal-title-font-size - 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-step__line {
|
||||||
|
top: 30px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-step__icon {
|
||||||
|
display: block;
|
||||||
|
font-size: @step-icon-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-step--process {
|
||||||
|
color: @step-process-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--vertical {
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
padding: 10px 10px 10px 0;
|
||||||
|
line-height: 18px;
|
||||||
|
|
||||||
|
&:not(:last-child)::after {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -15px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 1px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: @white;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-step__circle-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 19px;
|
||||||
|
left: -15px;
|
||||||
|
z-index: 2;
|
||||||
|
font-size: @step-icon-size;
|
||||||
|
line-height: 1;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-step__line {
|
||||||
|
top: 16px;
|
||||||
|
left: -15px;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.van-step__line {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--finish {
|
||||||
|
color: @step-finish-text-color;
|
||||||
|
|
||||||
|
.van-step__circle,
|
||||||
|
.van-step__line {
|
||||||
|
background-color: @step-finish-line-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon,
|
||||||
|
&__title {
|
||||||
|
transition: color @animation-duration-base;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
color: @step-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
89
src-next/steps/README.md
Normal file
89
src-next/steps/README.md
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
# Steps
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Step, Steps } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(Step);
|
||||||
|
Vue.use(Steps);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-steps :active="active">
|
||||||
|
<van-step>Step1</van-step>
|
||||||
|
<van-step>Step2</van-step>
|
||||||
|
<van-step>Step3</van-step>
|
||||||
|
<van-step>Step4</van-step>
|
||||||
|
</van-steps>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 1,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Style
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-steps :active="active" active-icon="success" active-color="#38f">
|
||||||
|
<van-step>Step1</van-step>
|
||||||
|
<van-step>Step2</van-step>
|
||||||
|
<van-step>Step3</van-step>
|
||||||
|
<van-step>Step4</van-step>
|
||||||
|
</van-steps>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vertical Steps
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-steps direction="vertical" :active="0">
|
||||||
|
<van-step>
|
||||||
|
<h3>【City】Status1</h3>
|
||||||
|
<p>2016-07-12 12:40</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>【City】Status2</h3>
|
||||||
|
<p>2016-07-11 10:00</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>【City】Status3</h3>
|
||||||
|
<p>2016-07-10 09:30</p>
|
||||||
|
</van-step>
|
||||||
|
</van-steps>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Steps Props
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Default |
|
||||||
|
| ------------- | ------------------------ | ------------------ | ------------ |
|
||||||
|
| active | Active step | _number \| string_ | `0` |
|
||||||
|
| direction | Can be set to `vertical` | _string_ | `horizontal` |
|
||||||
|
| active-color | Active step color | _string_ | `#07c160` |
|
||||||
|
| active-icon | Active icon name | _string_ | `checked` |
|
||||||
|
| inactive-icon | Active icon name | _string_ | - |
|
||||||
|
|
||||||
|
### Step Slots
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| ------------- | -------------------- |
|
||||||
|
| active-icon | Custom active icon |
|
||||||
|
| inactive-icon | Custom inactive icon |
|
||||||
|
|
||||||
|
### Steps Events
|
||||||
|
|
||||||
|
| Event | Description | Arguments |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| click-step `v2.5.9` | Triggered when a step's title or icon is clicked | _index: number_ |
|
||||||
95
src-next/steps/README.zh-CN.md
Normal file
95
src-next/steps/README.zh-CN.md
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
# Steps 步骤条
|
||||||
|
|
||||||
|
### 引入
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Step, Steps } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(Step);
|
||||||
|
Vue.use(Steps);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
|
`active`属性表示当前步骤的索引，从 0 起计
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-steps :active="active">
|
||||||
|
<van-step>买家下单</van-step>
|
||||||
|
<van-step>商家接单</van-step>
|
||||||
|
<van-step>买家提货</van-step>
|
||||||
|
<van-step>交易完成</van-step>
|
||||||
|
</van-steps>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 1,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义样式
|
||||||
|
|
||||||
|
可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-steps :active="active" active-icon="success" active-color="#38f">
|
||||||
|
<van-step>买家下单</van-step>
|
||||||
|
<van-step>商家接单</van-step>
|
||||||
|
<van-step>买家提货</van-step>
|
||||||
|
<van-step>交易完成</van-step>
|
||||||
|
</van-steps>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 竖向步骤条
|
||||||
|
|
||||||
|
可以通过设置`direction`属性来改变步骤条的显示方向
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-steps direction="vertical" :active="0">
|
||||||
|
<van-step>
|
||||||
|
<h3>【城市】物流状态1</h3>
|
||||||
|
<p>2016-07-12 12:40</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>【城市】物流状态2</h3>
|
||||||
|
<p>2016-07-11 10:00</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>快件已发货</h3>
|
||||||
|
<p>2016-07-10 09:30</p>
|
||||||
|
</van-step>
|
||||||
|
</van-steps>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Steps Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| active | 当前步骤 | _number \| string_ | `0` |
|
||||||
|
| direction | 显示方向，可选值为 `vertical` | _string_ | `horizontal` |
|
||||||
|
| active-color | 激活状态颜色 | _string_ | `#07c160` |
|
||||||
|
| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
|
||||||
|
| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
|
||||||
|
|
||||||
|
### Step Slots
|
||||||
|
|
||||||
|
| 名称 | 说明 |
|
||||||
|
| ------------- | -------------------- |
|
||||||
|
| active-icon | 自定义激活状态图标 |
|
||||||
|
| inactive-icon | 自定义未激活状态图标 |
|
||||||
|
|
||||||
|
### Steps Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
| ------------------- | -------------------------- | --------------- |
|
||||||
|
| click-step `v2.5.9` | 点击步骤的标题或图标时触发 | _index: number_ |
|
||||||
116
src-next/steps/demo/index.vue
Normal file
116
src-next/steps/demo/index.vue
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<demo-section>
|
||||||
|
<demo-block :title="t('basicUsage')">
|
||||||
|
<van-steps :active="active">
|
||||||
|
<van-step>{{ t('step1') }}</van-step>
|
||||||
|
<van-step>{{ t('step2') }}</van-step>
|
||||||
|
<van-step>{{ t('step3') }}</van-step>
|
||||||
|
<van-step>{{ t('step4') }}</van-step>
|
||||||
|
</van-steps>
|
||||||
|
|
||||||
|
<van-button @click="nextStep">{{ t('nextStep') }}</van-button>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block :title="t('customStyle')">
|
||||||
|
<van-steps
|
||||||
|
:active="active"
|
||||||
|
active-icon="success"
|
||||||
|
inactive-icon="arrow"
|
||||||
|
active-color="#38f"
|
||||||
|
>
|
||||||
|
<van-step>{{ t('step1') }}</van-step>
|
||||||
|
<van-step>{{ t('step2') }}</van-step>
|
||||||
|
<van-step>{{ t('step3') }}</van-step>
|
||||||
|
<van-step>{{ t('step4') }}</van-step>
|
||||||
|
</van-steps>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block :title="t('title3')">
|
||||||
|
<van-steps :active="0" direction="vertical">
|
||||||
|
<van-step>
|
||||||
|
<h3>{{ t('status1') }}</h3>
|
||||||
|
<p>2016-07-12 12:40</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>{{ t('status2') }}</h3>
|
||||||
|
<p>2016-07-11 10:00</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>{{ t('status3') }}</h3>
|
||||||
|
<p>2016-07-10 09:30</p>
|
||||||
|
</van-step>
|
||||||
|
</van-steps>
|
||||||
|
</demo-block>
|
||||||
|
</demo-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
i18n: {
|
||||||
|
'zh-CN': {
|
||||||
|
nextStep: '下一步',
|
||||||
|
step1: '买家下单',
|
||||||
|
step2: '商家接单',
|
||||||
|
step3: '买家提货',
|
||||||
|
step4: '交易完成',
|
||||||
|
title2: '描述信息',
|
||||||
|
title3: '竖向步骤条',
|
||||||
|
status1: '【城市】物流状态1',
|
||||||
|
status2: '【城市】物流状态',
|
||||||
|
status3: '快件已发货',
|
||||||
|
customStyle: '自定义样式',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
nextStep: 'Next Step',
|
||||||
|
step1: 'Step1',
|
||||||
|
step2: 'Step2',
|
||||||
|
step3: 'Step3',
|
||||||
|
step4: 'Step4',
|
||||||
|
title2: 'Description',
|
||||||
|
title3: 'Vertical Steps',
|
||||||
|
status1: '【City】Status1',
|
||||||
|
status2: '【City】Status2',
|
||||||
|
status3: '【City】Status3',
|
||||||
|
customStyle: 'Custom Style',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 1,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
nextStep() {
|
||||||
|
this.active = ++this.active % 4;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '../../style/var';
|
||||||
|
|
||||||
|
.demo-steps {
|
||||||
|
.steps-success,
|
||||||
|
.van-icon-location {
|
||||||
|
color: @green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-button {
|
||||||
|
margin: @padding-md 0 0 @padding-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-steps__message + p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
35
src-next/steps/index.js
Normal file
35
src-next/steps/index.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { createNamespace } from '../utils';
|
||||||
|
import { ParentMixin } from '../mixins/relation';
|
||||||
|
|
||||||
|
const [createComponent, bem] = createNamespace('steps');
|
||||||
|
|
||||||
|
export default createComponent({
|
||||||
|
mixins: [ParentMixin('vanSteps')],
|
||||||
|
|
||||||
|
props: {
|
||||||
|
activeColor: String,
|
||||||
|
inactiveIcon: String,
|
||||||
|
active: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
direction: {
|
||||||
|
type: String,
|
||||||
|
default: 'horizontal',
|
||||||
|
},
|
||||||
|
activeIcon: {
|
||||||
|
type: String,
|
||||||
|
default: 'checked',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
emits: ['click-step'],
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div class={bem([this.direction])}>
|
||||||
|
<div class={bem('items')}>{this.$slots.default?.()}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
21
src-next/steps/index.less
Normal file
21
src-next/steps/index.less
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
@import '../style/var';
|
||||||
|
|
||||||
|
.van-steps {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: @steps-background-color;
|
||||||
|
|
||||||
|
&--horizontal {
|
||||||
|
padding: 10px 10px 0;
|
||||||
|
|
||||||
|
.van-steps__items {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
padding-bottom: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--vertical {
|
||||||
|
padding: 0 0 0 @padding-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
96
src-next/steps/test/__snapshots__/demo.spec.js.snap
Normal file
96
src-next/steps/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders demo correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="van-steps van-steps--horizontal">
|
||||||
|
<div class="van-steps__items">
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--finish">
|
||||||
|
<div class="van-step__title">买家下单</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
||||||
|
<div class="van-step__title van-step__title--active">商家接单</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
|
||||||
|
<!----></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal">
|
||||||
|
<div class="van-step__title">买家提货</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal">
|
||||||
|
<div class="van-step__title">交易完成</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <button class="van-button van-button--default van-button--normal">
|
||||||
|
<div class="van-button__content"><span class="van-button__text">下一步</span></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-steps van-steps--horizontal">
|
||||||
|
<div class="van-steps__items">
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--finish">
|
||||||
|
<div class="van-step__title">买家下单</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
|
||||||
|
<!----></i></div>
|
||||||
|
<div class="van-step__line" style="background: rgb(51, 136, 255);"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
||||||
|
<div class="van-step__title van-step__title--active" style="color: rgb(51, 136, 255);">商家接单</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon van-step__icon--active" style="color: rgb(51, 136, 255);">
|
||||||
|
<!----></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal">
|
||||||
|
<div class="van-step__title">买家提货</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
|
||||||
|
<!----></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal">
|
||||||
|
<div class="van-step__title">交易完成</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
|
||||||
|
<!----></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-steps van-steps--vertical">
|
||||||
|
<div class="van-steps__items">
|
||||||
|
<div class="van-hairline van-step van-step--vertical van-step--process">
|
||||||
|
<div class="van-step__title van-step__title--active">
|
||||||
|
<h3>【城市】物流状态1</h3>
|
||||||
|
<p>2016-07-12 12:40</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
|
||||||
|
<!----></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--vertical">
|
||||||
|
<div class="van-step__title">
|
||||||
|
<h3>【城市】物流状态</h3>
|
||||||
|
<p>2016-07-11 10:00</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--vertical">
|
||||||
|
<div class="van-step__title">
|
||||||
|
<h3>快件已发货</h3>
|
||||||
|
<p>2016-07-10 09:30</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
29
src-next/steps/test/__snapshots__/index.spec.js.snap
Normal file
29
src-next/steps/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`icon slot 1`] = `
|
||||||
|
<div class="van-steps van-steps--horizontal">
|
||||||
|
<div class="van-steps__items">
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--finish">
|
||||||
|
<div class="van-step__title">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">Custim Inactive Icon</div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
||||||
|
<div class="van-step__title van-step__title--active">
|
||||||
|
B
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">Custim Active Icon</div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal">
|
||||||
|
<div class="van-step__title">
|
||||||
|
C
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">Custim Inactive Icon</div>
|
||||||
|
<div class="van-step__line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
4
src-next/steps/test/demo.spec.js
Normal file
4
src-next/steps/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Demo from '../demo';
|
||||||
|
import { snapshotDemo } from '../../../test/demo';
|
||||||
|
|
||||||
|
snapshotDemo(Demo);
|
||||||
49
src-next/steps/test/index.spec.js
Normal file
49
src-next/steps/test/index.spec.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import { mount } from '../../../test';
|
||||||
|
|
||||||
|
test('icon slot', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
template: `
|
||||||
|
<van-steps :active="1">
|
||||||
|
<van-step>
|
||||||
|
<template v-slot:inactive-icon>Custim Inactive Icon</template>
|
||||||
|
A
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<template v-slot:active-icon>Custim Active Icon</template>
|
||||||
|
B
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<template v-slot:inactive-icon>Custim Inactive Icon</template>
|
||||||
|
C
|
||||||
|
</van-step>
|
||||||
|
</van-steps>
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('click-step event', () => {
|
||||||
|
const onClickStep = jest.fn();
|
||||||
|
const wrapper = mount({
|
||||||
|
template: `
|
||||||
|
<van-steps :active="1" @click-step="onClickStep">
|
||||||
|
<van-step>A</van-step>
|
||||||
|
<van-step>B</van-step>
|
||||||
|
<van-step>C</van-step>
|
||||||
|
</van-steps>
|
||||||
|
`,
|
||||||
|
methods: {
|
||||||
|
onClickStep,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.find('.van-step').trigger('click');
|
||||||
|
expect(onClickStep).toHaveBeenCalledTimes(0);
|
||||||
|
|
||||||
|
wrapper.find('.van-step__title').trigger('click');
|
||||||
|
expect(onClickStep).toHaveBeenCalledWith(0);
|
||||||
|
|
||||||
|
wrapper.findAll('.van-step__circle-container').at(2).trigger('click');
|
||||||
|
expect(onClickStep).toHaveBeenCalledTimes(2);
|
||||||
|
expect(onClickStep).toHaveBeenLastCalledWith(2);
|
||||||
|
});
|
||||||
@ -265,10 +265,10 @@ module.exports = {
|
|||||||
path: 'skeleton',
|
path: 'skeleton',
|
||||||
title: 'Skeleton 骨架屏',
|
title: 'Skeleton 骨架屏',
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// path: 'steps',
|
path: 'steps',
|
||||||
// title: 'Steps 步骤条',
|
title: 'Steps 步骤条',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: 'sticky',
|
// path: 'sticky',
|
||||||
// title: 'Sticky 粘性布局',
|
// title: 'Sticky 粘性布局',
|
||||||
@ -599,10 +599,10 @@ module.exports = {
|
|||||||
path: 'skeleton',
|
path: 'skeleton',
|
||||||
title: 'Skeleton',
|
title: 'Skeleton',
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// path: 'steps',
|
path: 'steps',
|
||||||
// title: 'Steps',
|
title: 'Steps',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: 'sticky',
|
// path: 'sticky',
|
||||||
// title: 'Sticky',
|
// title: 'Sticky',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user