update vc-xxx

pull/165/head
tangjinzhou 2018-03-13 10:19:00 +08:00
parent f0918f2b76
commit e55ccd2262
10 changed files with 35 additions and 29 deletions

View File

@ -70,6 +70,7 @@ export function cloneElement (n, nodeProps, deep) {
domProps = {}, domProps = {},
style: tempStyle = {}, style: tempStyle = {},
class: tempCls = {}, class: tempCls = {},
scopedSlots = {},
} = nodeProps } = nodeProps
if (typeof data.style === 'string') { if (typeof data.style === 'string') {
@ -99,6 +100,7 @@ export function cloneElement (n, nodeProps, deep) {
attrs: { ...data.attrs, ...attrs }, attrs: { ...data.attrs, ...attrs },
class: cls, class: cls,
domProps: { ...data.domProps, ...domProps }, domProps: { ...data.domProps, ...domProps },
scopedSlots: { ...data.scopedSlots, ...scopedSlots },
}) })
if (node.componentOptions) { if (node.componentOptions) {

View File

@ -10,30 +10,19 @@ You can customize the display for Steps with progress dot style.
```html ```html
<template> <template>
<a-steps :current="1" :progressDot="customDot"> <div>
<a-steps :current="1">
<a-popover slot="progressDot" slot-scope="{index, status, prefixCls}">
<template slot="content">
<span>step {{index}} status: {{status}}</span>
</template>
<span :class="`${prefixCls}-icon-dot`"></span>
</a-popover>
<a-step title="Finished" description="You can hover on the dot." /> <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="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-step title="Waiting" description="You can hover on the dot." /> <a-step title="Waiting" description="You can hover on the dot." />
</a-steps> </a-steps>
</div>
</template> </template>
<script>
export default {
data() {
return {}
},
methods: {
customDot(dot, {index, status}) {
return (
<a-popover>
<template slot="content">
<span>step {index} status: {status}</span>
</template>
{dot}
</a-popover>
)
}
},
}
</script>
``` ```

View File

@ -6,7 +6,7 @@ The whole of the step bar.
| -------- | ----------- | ---- | ------- | | -------- | ----------- | ---- | ------- |
| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | | 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` | | 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}) => vNode | false | | progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | | 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` | | status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |

View File

@ -32,6 +32,7 @@ export default {
const stepsProps = { const stepsProps = {
props, props,
on: this.$listeners, on: this.$listeners,
scopedSlots: this.$scopedSlots,
} }
return ( return (
<VcSteps <VcSteps

View File

@ -7,7 +7,7 @@
| --- | --- | --- | --- | | --- | --- | --- | --- |
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 | | current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 |
| direction | 指定步骤条方向。目前支持水平(`horizontal`)和竖直(`vertical`)两种方向 | string | horizontal | | direction | 指定步骤条方向。目前支持水平(`horizontal`)和竖直(`vertical`)两种方向 | string | horizontal |
| progressDot | 点状步骤条,可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => vNode | false | | progressDot | 点状步骤条,可以设置为一个 作用域插槽 | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
| size | 指定大小,目前支持普通(`default`)和迷你(`small` | string | default | | size | 指定大小,目前支持普通(`default`)和迷你(`small` | string | default |
| status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | string | process | | status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | string | process |

View File

@ -1,4 +1,5 @@
<script> <script>
// based on rc-tabs 9.2.4
import Icon from '../../icon' import Icon from '../../icon'
import KeyCode from './KeyCode' import KeyCode from './KeyCode'
import TabContent from './TabContent' import TabContent from './TabContent'

View File

@ -28,9 +28,13 @@ export default {
methods: { methods: {
renderIconNode () { renderIconNode () {
const { const {
prefixCls, progressDot, stepNumber, status, prefixCls, stepNumber, status,
iconPrefix, iconPrefix,
} = getOptionProps(this) } = getOptionProps(this)
let progressDot = this.progressDot
if (progressDot === undefined) {
progressDot = this.$scopedSlots.progressDot
}
const icon = getComponentFromProp(this, 'icon') const icon = getComponentFromProp(this, 'icon')
const title = getComponentFromProp(this, 'title') const title = getComponentFromProp(this, 'title')
const description = getComponentFromProp(this, 'description') const description = getComponentFromProp(this, 'description')
@ -48,7 +52,7 @@ export default {
if (typeof progressDot === 'function') { if (typeof progressDot === 'function') {
iconNode = ( iconNode = (
<span class={`${prefixCls}-icon`}> <span class={`${prefixCls}-icon`}>
{progressDot(iconDot, { index: stepNumber - 1, status, title, description })} {progressDot({ index: stepNumber - 1, status, title, description, prefixCls })}
</span> </span>
) )
} else { } else {

View File

@ -24,7 +24,7 @@ export default {
progressDot: PropTypes.oneOfType([ progressDot: PropTypes.oneOfType([
PropTypes.bool, PropTypes.bool,
PropTypes.func, PropTypes.func,
]).def(false), ]),
current: PropTypes.number.def(0), current: PropTypes.number.def(0),
}, },
data () { data () {
@ -84,8 +84,12 @@ export default {
render () { render () {
const { const {
prefixCls, direction, prefixCls, direction,
labelPlacement, iconPrefix, status, size, current, progressDot, labelPlacement, iconPrefix, status, size, current, $scopedSlots,
} = getOptionProps(this) } = this
let progressDot = this.progressDot
if (progressDot === undefined) {
progressDot = $scopedSlots.progressDot
}
const { lastStepOffsetWidth, flexSupported } = this const { lastStepOffsetWidth, flexSupported } = this
const filteredChildren = filterEmpty(this.$slots.default) const filteredChildren = filterEmpty(this.$slots.default)
const lastIndex = filteredChildren.length - 1 const lastIndex = filteredChildren.length - 1
@ -112,10 +116,11 @@ export default {
stepNumber: `${index + 1}`, stepNumber: `${index + 1}`,
prefixCls, prefixCls,
iconPrefix, iconPrefix,
progressDot, progressDot: this.progressDot,
...childProps, ...childProps,
}, },
on: getEvents(child), on: getEvents(child),
scopedSlots: $scopedSlots,
} }
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) { if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
stepProps.props.itemWidth = `${100 / lastIndex}%` stepProps.props.itemWidth = `${100 / lastIndex}%`

View File

@ -56,6 +56,7 @@ export default {
focusOnOpen: PropTypes.bool, focusOnOpen: PropTypes.bool,
// onKeyDown: PropTypes.func, // onKeyDown: PropTypes.func,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
id: PropTypes.string,
}, { }, {
clearText: 'clear', clearText: 'clear',
prefixCls: 'rc-time-picker', prefixCls: 'rc-time-picker',
@ -63,6 +64,7 @@ export default {
inputReadOnly: false, inputReadOnly: false,
popupClassName: '', popupClassName: '',
align: {}, align: {},
id: '',
allowEmpty: true, allowEmpty: true,
showHour: true, showHour: true,
showMinute: true, showMinute: true,
@ -252,7 +254,7 @@ export default {
render () { render () {
const { const {
prefixCls, placeholder, placement, align, prefixCls, placeholder, placement, align, id,
disabled, transitionName, getPopupContainer, name, autoComplete, disabled, transitionName, getPopupContainer, name, autoComplete,
autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur, autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur,
} = this } = this
@ -289,6 +291,7 @@ export default {
onBlur={onBlur} onBlur={onBlur}
autoFocus={autoFocus} autoFocus={autoFocus}
readOnly={!!inputReadOnly} readOnly={!!inputReadOnly}
id={id}
/> />
<span class={`${prefixCls}-icon`}/> <span class={`${prefixCls}-icon`}/>
</span> </span>

View File

@ -1 +1,2 @@
// based on rc-time-picker 3.3.1
export { default } from './TimePicker' export { default } from './TimePicker'