Merge branch 'master' of https://github.com/vueComponent/ant-design
tjz
commit
353ce154b4
|
|
@ -79,7 +79,11 @@ const getComponentFromProp = (instance, prop) => {
|
|||
const componentOptions = instance.componentOptions || {};
|
||||
(componentOptions.children || []).forEach((child) => {
|
||||
if (child.data && child.data.slot === prop) {
|
||||
slotsProp.push(child)
|
||||
if (child.tag === 'template') {
|
||||
slotsProp.push(child.children)
|
||||
} else {
|
||||
slotsProp.push(child)
|
||||
}
|
||||
}
|
||||
})
|
||||
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>
|
||||
import '../style'
|
||||
import {} from 'antd'
|
||||
import CustomizedProgressDot from './customized-progress-dot'
|
||||
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 {
|
||||
data () {
|
||||
return {}
|
||||
render () {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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 './alert/style'
|
||||
import './time-picker/style'
|
||||
import './steps/style'
|
||||
import './breadcrumb/style'
|
||||
|
|
|
|||
|
|
@ -34,10 +34,12 @@ export default {
|
|||
methods: {
|
||||
renderIconNode () {
|
||||
const {
|
||||
prefixCls, progressDot, stepNumber, status, title, description,
|
||||
prefixCls, progressDot, stepNumber, status,
|
||||
iconPrefix,
|
||||
} = 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
|
||||
const iconClassName = {
|
||||
[`${prefixCls}-icon`]: true,
|
||||
|
|
@ -71,11 +73,13 @@ export default {
|
|||
render () {
|
||||
const {
|
||||
prefixCls,
|
||||
status = 'wait', icon,
|
||||
description, title, tailContent,
|
||||
status = 'wait', icon, tailContent,
|
||||
...restProps
|
||||
} = getOptionProps(this)
|
||||
|
||||
const title = this.title || this.$slots.title
|
||||
const description = this.description || this.$slots.description
|
||||
|
||||
const classString = {
|
||||
[`${prefixCls}-item`]: true,
|
||||
[`${prefixCls}-item-${status}`]: true,
|
||||
|
|
|
|||
|
|
@ -145,7 +145,13 @@ export default {
|
|||
class: className,
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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 alert } from 'antd/alert/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