mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 03:44:48 +00:00
[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
119
src/steps/demo/index.vue
Normal file
119
src/steps/demo/index.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<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: 15px 0 0 15px;
|
||||
}
|
||||
|
||||
.van-steps__message + p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p,
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
src/steps/en-US.md
Normal file
86
src/steps/en-US.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# Steps
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Step, Steps } from 'vant';
|
||||
|
||||
Vue.use(Step).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>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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` | 0 |
|
||||
| description | Description | `String` | - |
|
||||
| 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 |
|
||||
37
src/steps/index.js
Normal file
37
src/steps/index.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { GREEN } from '../utils/color';
|
||||
|
||||
const [createComponent, bem] = createNamespace('steps');
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
active: Number,
|
||||
inactiveIcon: String,
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: GREEN
|
||||
},
|
||||
activeIcon: {
|
||||
type: String,
|
||||
default: 'checked'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
steps: []
|
||||
};
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<div class={bem([this.direction])}>
|
||||
<div class={bem('items')}>{this.slots()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
21
src/steps/index.less
Normal file
21
src/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 35px;
|
||||
}
|
||||
}
|
||||
94
src/steps/test/__snapshots__/demo.spec.js.snap
Normal file
94
src/steps/test/__snapshots__/demo.spec.js.snap
Normal file
@@ -0,0 +1,94 @@
|
||||
// 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" style="color: rgb(7, 193, 96);">商家接单</div>
|
||||
<div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color: rgb(7, 193, 96);">
|
||||
<!----></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"><span class="van-button__text">下一步</span></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"></div>
|
||||
</div>
|
||||
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
||||
<div class="van-step__title" style="color: rgb(51, 136, 255);">商家接单</div>
|
||||
<div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon" 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" style="color: rgb(7, 193, 96);">
|
||||
<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" style="color: rgb(7, 193, 96);">
|
||||
<!----></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/steps/test/__snapshots__/index.spec.js.snap
Normal file
29
src/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" style="color: rgb(7, 193, 96);">
|
||||
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/steps/test/demo.spec.js
Normal file
4
src/steps/test/demo.spec.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
29
src/steps/test/index.spec.js
Normal file
29
src/steps/test/index.spec.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import { mount } from '../../../test/utils';
|
||||
import Steps from '..';
|
||||
import Step from '../../step';
|
||||
|
||||
test('icon slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<steps :active="1">
|
||||
<step>
|
||||
<template v-slot:inactive-icon>Custim Inactive Icon</template>
|
||||
A
|
||||
</step>
|
||||
<step>
|
||||
<template v-slot:active-icon>Custim Active Icon</template>
|
||||
B
|
||||
</step>
|
||||
<step>
|
||||
<template v-slot:inactive-icon>Custim Inactive Icon</template>
|
||||
C
|
||||
</step>
|
||||
</steps>
|
||||
`,
|
||||
components: {
|
||||
Steps,
|
||||
Step
|
||||
}
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
89
src/steps/zh-CN.md
Normal file
89
src/steps/zh-CN.md
Normal file
@@ -0,0 +1,89 @@
|
||||
# Steps 步骤条
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Step, Steps } from 'vant';
|
||||
|
||||
Vue.use(Step).use(Steps);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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` | 0 | - |
|
||||
| direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - |
|
||||
| active-color | 激活状态颜色 | `String` | `#07c160` | - |
|
||||
| active-icon | 激活状态底部图标，可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
|
||||
| inactive-icon | 未激活状态底部图标，可选值见 Icon 组件 | `String` | - | 2.0.0 |
|
||||
|
||||
### Step Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| active-icon | 自定义激活状态图标 |
|
||||
| inactive-icon | 自定义未激活状态图标 |
|
||||
Reference in New Issue
Block a user