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

View File

@ -10,30 +10,19 @@ You can customize the display for Steps with progress dot style.
```html
<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="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>
</div>
</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 |
| 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` |
| 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 = {
props,
on: this.$listeners,
scopedSlots: this.$scopedSlots,
}
return (
<VcSteps

View File

@ -7,7 +7,7 @@
| --- | --- | --- | --- |
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 |
| 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 |
| status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | string | process |

View File

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

View File

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

View File

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

View File

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

View File

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