Merge branch 'master' of https://github.com/vueComponent/ant-design
tjz
commit
04e7d12d6b
|
|
@ -79,8 +79,12 @@ const getComponentFromProp = (instance, prop) => {
|
||||||
const componentOptions = instance.componentOptions || {};
|
const componentOptions = instance.componentOptions || {};
|
||||||
(componentOptions.children || []).forEach((child) => {
|
(componentOptions.children || []).forEach((child) => {
|
||||||
if (child.data && child.data.slot === prop) {
|
if (child.data && child.data.slot === prop) {
|
||||||
|
if (child.tag === 'template') {
|
||||||
|
slotsProp.push(child.children)
|
||||||
|
} else {
|
||||||
slotsProp.push(child)
|
slotsProp.push(child)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
return slotsProp.length ? slotsProp : undefined
|
return slotsProp.length ? slotsProp : undefined
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<cn>
|
||||||
|
#### 自定义点状步骤条
|
||||||
|
为点状步骤条增加自定义展示。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Customized Dot Style
|
||||||
|
You can customize the display for Steps with progress dot style.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-steps :current="1" :progressDot="customDot" style="margin-top:150px">
|
||||||
|
<a-step title="Finished" description="You can hover on the dot." />
|
||||||
|
<a-step title="In Progress" description="You can hover on the dot." />
|
||||||
|
<a-step title="Waiting" description="You can hover on the dot." />
|
||||||
|
<a-step title="Waiting" description="You can hover on the dot." />
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
customDot(dot, params) {
|
||||||
|
return (
|
||||||
|
<a-popover>
|
||||||
|
<template slot="content">
|
||||||
|
<span>step {params.index} status: {params.status}</span>
|
||||||
|
</template>
|
||||||
|
{dot}
|
||||||
|
</a-popover>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<cn>
|
||||||
|
#### 步骤运行错误
|
||||||
|
使用 Steps 的 `status` 属性来指定当前步骤的状态。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Error status
|
||||||
|
By using `status` of `Steps`, you can specify the state for current step.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-steps :current="1" status="error">
|
||||||
|
<a-step title="Finished" description="This is a description." />
|
||||||
|
<a-step title="In Progress" description="This is a description." />
|
||||||
|
<a-step title="Waiting" description="This is a description." />
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<cn>
|
||||||
|
#### 带图标的步骤条
|
||||||
|
通过设置 `Steps.Step` 的 `icon` 属性，可以启用自定义图标。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### With icon
|
||||||
|
You can use your own custom icons by setting the property `icon` for `Steps.Step`.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-steps>
|
||||||
|
<a-step status="finish" title="Login"}>
|
||||||
|
<a-icon type="user" slot="icon"/>
|
||||||
|
</a-step>
|
||||||
|
<a-step status="finish" title="Verification"}>
|
||||||
|
<a-icon type="solution" slot="icon"/>
|
||||||
|
</a-step>
|
||||||
|
<a-step status="process" title="Pay"}>
|
||||||
|
<a-icon type="loading" slot="icon"/>
|
||||||
|
</a-step>
|
||||||
|
<a-step status="wait" title="Done"}>
|
||||||
|
<a-icon type="smile-o" slot="icon"/>
|
||||||
|
</a-step>
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -1,18 +1,64 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a-steps :current="1">
|
|
||||||
<a-step title="Finished" description="This is a description." />
|
|
||||||
<a-step title="In Progress" description="This is a description." />
|
|
||||||
<a-step title="Waiting" description="This is a description." />
|
|
||||||
</a-steps>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
<script>
|
||||||
import '../style'
|
import CustomizedProgressDot from './customized-progress-dot'
|
||||||
import {} from 'antd'
|
import Error from './error'
|
||||||
|
import Icon from './icon'
|
||||||
|
import ProgressDot from './progress-dot'
|
||||||
|
import Simple from './simple'
|
||||||
|
import SmallSize from './small-size'
|
||||||
|
import StepNext from './step-next'
|
||||||
|
import VerticalSmall from './vertical-small'
|
||||||
|
import Vertical from './vertical'
|
||||||
|
import CN from '../index.zh-CN.md'
|
||||||
|
import US from '../index.en-US.md'
|
||||||
|
|
||||||
|
const md = {
|
||||||
|
cn: `# Steps
|
||||||
|
|
||||||
|
引导用户按照流程完成任务的导航条。
|
||||||
|
|
||||||
|
## 何时使用
|
||||||
|
|
||||||
|
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
|
||||||
|
## 代码演示`,
|
||||||
|
us: `# Steps
|
||||||
|
|
||||||
|
'Steps' is a navigation bar that guides users through the steps of a task.
|
||||||
|
|
||||||
|
# When To Use
|
||||||
|
|
||||||
|
When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.`,
|
||||||
|
}
|
||||||
export default {
|
export default {
|
||||||
data () {
|
render () {
|
||||||
return {}
|
return (
|
||||||
|
<div>
|
||||||
|
<md cn={md.cn} us={md.us}/>
|
||||||
|
<Simple />
|
||||||
|
<br/>
|
||||||
|
<SmallSize />
|
||||||
|
<br/>
|
||||||
|
<Icon />
|
||||||
|
<br/>
|
||||||
|
<StepNext />
|
||||||
|
<br/>
|
||||||
|
<Vertical />
|
||||||
|
<br/>
|
||||||
|
<VerticalSmall />
|
||||||
|
<br/>
|
||||||
|
<Error />
|
||||||
|
<br/>
|
||||||
|
<ProgressDot />
|
||||||
|
<br/>
|
||||||
|
<CustomizedProgressDot />
|
||||||
|
<br/>
|
||||||
|
<api>
|
||||||
|
<template slot='cn'>
|
||||||
|
<CN/>
|
||||||
|
</template>
|
||||||
|
<US/>
|
||||||
|
</api>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<cn>
|
||||||
|
#### 点状步骤条
|
||||||
|
包含步骤点的进度条。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Dot Style
|
||||||
|
Steps with progress dot style.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-steps progressDot :current="1">
|
||||||
|
<a-step title="Finished" description="This is a description." />
|
||||||
|
<a-step title="In Progress" description="This is a description." />
|
||||||
|
<a-step title="Waiting" description="This is a description." />
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<cn>
|
||||||
|
#### 基本用法
|
||||||
|
简单的步骤条。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Basic
|
||||||
|
The most basic step bar.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-steps :current="1">
|
||||||
|
<a-step>
|
||||||
|
<!-- <span slot="title">Finished</span> -->
|
||||||
|
<template slot="title">
|
||||||
|
Finished
|
||||||
|
</template>
|
||||||
|
<span slot="description">This is a description.</span>
|
||||||
|
</a-step>
|
||||||
|
<a-step title="In Progress" description="This is a description." />
|
||||||
|
<a-step title="Waiting" description="This is a description." />
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<cn>
|
||||||
|
#### 迷你版
|
||||||
|
迷你版的步骤条，通过设置 `<Steps size="small">` 启用。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Mini version
|
||||||
|
By setting like this: `<Steps size="small">`, you can get a mini version.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-steps :current="1" size="small">
|
||||||
|
<a-step title="Finished" />
|
||||||
|
<a-step title="In Progress" />
|
||||||
|
<a-step title="Waiting" />
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<cn>
|
||||||
|
#### 步骤切换
|
||||||
|
通常配合内容及按钮使用，表示一个流程的处理进度。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Switch Step
|
||||||
|
Cooperate with the content and buttons, to represent the progress of a process.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-steps :current="current">
|
||||||
|
<a-step v-for="item in steps" :key="item.title" :title="item.title" />
|
||||||
|
</a-steps>
|
||||||
|
<div class="steps-content">{{steps[current].content}}</div>
|
||||||
|
<div class="steps-action">
|
||||||
|
<a-button
|
||||||
|
v-if="current < steps.length - 1"
|
||||||
|
type="primary" @click="next"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="current == steps.length - 1"
|
||||||
|
type="primary"
|
||||||
|
@click="$message.success('Processing complete!')"
|
||||||
|
>
|
||||||
|
Done
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="current>0"
|
||||||
|
style="margin-left: 8px"
|
||||||
|
@click="prev"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: 0,
|
||||||
|
steps: [{
|
||||||
|
title: 'First',
|
||||||
|
content: 'First-content',
|
||||||
|
}, {
|
||||||
|
title: 'Second',
|
||||||
|
content: 'Second-content',
|
||||||
|
}, {
|
||||||
|
title: 'Last',
|
||||||
|
content: 'Last-content',
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
next() {
|
||||||
|
this.current++
|
||||||
|
},
|
||||||
|
prev() {
|
||||||
|
this.current--
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.steps-content {
|
||||||
|
margin-top: 16px;
|
||||||
|
border: 1px dashed #e9e9e9;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #fafafa;
|
||||||
|
min-height: 200px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-action {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<cn>
|
||||||
|
#### 竖直方向的小型步骤条
|
||||||
|
简单的竖直方向的小型步骤条。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Vertical mini version
|
||||||
|
A simple mini version step bar in the vertical direction.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-steps direction="vertical" size="small" :current="1">
|
||||||
|
<a-step title="Finished" description="This is a description." />
|
||||||
|
<a-step title="In Progress" description="This is a description." />
|
||||||
|
<a-step title="Waiting" description="This is a description." />
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<cn>
|
||||||
|
#### 竖直方向的步骤条
|
||||||
|
简单的竖直方向的步骤条。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Vertical
|
||||||
|
A simple step bar in the vertical direction.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-steps direction="vertical" :current="1">
|
||||||
|
<a-step title="Finished" description="This is a description." />
|
||||||
|
<a-step title="In Progress" description="This is a description." />
|
||||||
|
<a-step title="Waiting" description="This is a description." />
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
### Steps
|
||||||
|
|
||||||
|
The whole of the step bar.
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
|
||||||
|
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
|
||||||
|
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
|
||||||
|
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
|
||||||
|
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
|
||||||
|
|
||||||
|
### Steps.Step
|
||||||
|
|
||||||
|
A single step in the step bar.
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| description | description of the step, optional property | string\|slot | - |
|
||||||
|
| icon | icon of the step, optional property | string\|slot | - |
|
||||||
|
| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` |
|
||||||
|
| title | title of the step | string\|slot | - |
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
|
||||||
|
### Steps
|
||||||
|
|
||||||
|
整体步骤条。
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
|
||||||
|
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
|
||||||
|
| progressDot | 点状步骤条，可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
|
||||||
|
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
|
||||||
|
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
|
||||||
|
|
||||||
|
### Steps.Step
|
||||||
|
|
||||||
|
步骤条内的每一个步骤。
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| description | 步骤的详情描述，可选 | string\|slot | - |
|
||||||
|
| icon | 步骤图标的类型，可选 | string\|slot | - |
|
||||||
|
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait |
|
||||||
|
| title | 标题 | string\|slot | - |
|
||||||
|
|
@ -30,4 +30,5 @@ import './back-top/style'
|
||||||
import './modal/style'
|
import './modal/style'
|
||||||
import './alert/style'
|
import './alert/style'
|
||||||
import './time-picker/style'
|
import './time-picker/style'
|
||||||
|
import './steps/style'
|
||||||
import './breadcrumb/style'
|
import './breadcrumb/style'
|
||||||
|
|
|
||||||
|
|
@ -34,10 +34,12 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
renderIconNode () {
|
renderIconNode () {
|
||||||
const {
|
const {
|
||||||
prefixCls, progressDot, stepNumber, status, title, description,
|
prefixCls, progressDot, stepNumber, status,
|
||||||
iconPrefix,
|
iconPrefix,
|
||||||
} = getOptionProps(this)
|
} = getOptionProps(this)
|
||||||
const icon = this.icon || this.$slots.default
|
const icon = this.icon || this.$slots.icon
|
||||||
|
const title = this.title || this.$slots.title
|
||||||
|
const description = this.description || this.$slots.description
|
||||||
let iconNode
|
let iconNode
|
||||||
const iconClassName = {
|
const iconClassName = {
|
||||||
[`${prefixCls}-icon`]: true,
|
[`${prefixCls}-icon`]: true,
|
||||||
|
|
@ -71,11 +73,13 @@ export default {
|
||||||
render () {
|
render () {
|
||||||
const {
|
const {
|
||||||
prefixCls,
|
prefixCls,
|
||||||
status = 'wait', icon,
|
status = 'wait', icon, tailContent,
|
||||||
description, title, tailContent,
|
|
||||||
...restProps
|
...restProps
|
||||||
} = getOptionProps(this)
|
} = getOptionProps(this)
|
||||||
|
|
||||||
|
const title = this.title || this.$slots.title
|
||||||
|
const description = this.description || this.$slots.description
|
||||||
|
|
||||||
const classString = {
|
const classString = {
|
||||||
[`${prefixCls}-item`]: true,
|
[`${prefixCls}-item`]: true,
|
||||||
[`${prefixCls}-item-${status}`]: true,
|
[`${prefixCls}-item-${status}`]: true,
|
||||||
|
|
|
||||||
|
|
@ -145,7 +145,13 @@ export default {
|
||||||
class: className,
|
class: className,
|
||||||
style: stepStyle,
|
style: stepStyle,
|
||||||
}
|
}
|
||||||
return <Step {...stepProps}>{getComponentFromProp(child, 'icon')}</Step>
|
return (
|
||||||
|
<Step {...stepProps}>
|
||||||
|
<template slot='icon'>{getComponentFromProp(child, 'icon')}</template>
|
||||||
|
<template slot='description'>{getComponentFromProp(child, 'description')}</template>
|
||||||
|
<template slot='title'>{getComponentFromProp(child, 'title')}</template>
|
||||||
|
</Step>
|
||||||
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -31,3 +31,4 @@ export { default as backTop } from 'antd/back-top/demo/index.vue'
|
||||||
export { default as modal } from 'antd/modal/demo/index.vue'
|
export { default as modal } from 'antd/modal/demo/index.vue'
|
||||||
export { default as alert } from 'antd/alert/demo/index.vue'
|
export { default as alert } from 'antd/alert/demo/index.vue'
|
||||||
export { default as timePicker } from 'antd/time-picker/demo/index.vue'
|
export { default as timePicker } from 'antd/time-picker/demo/index.vue'
|
||||||
|
export { default as steps } from 'antd/steps/demo/index.vue'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue