update vc-xxx
parent
f0918f2b76
commit
e55ccd2262
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
```
|
||||
|
|
|
@ -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` |
|
||||
|
||||
|
|
|
@ -32,6 +32,7 @@ export default {
|
|||
const stepsProps = {
|
||||
props,
|
||||
on: this.$listeners,
|
||||
scopedSlots: this.$scopedSlots,
|
||||
}
|
||||
return (
|
||||
<VcSteps
|
||||
|
|
|
@ -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 |
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
// based on rc-tabs 9.2.4
|
||||
import Icon from '../../icon'
|
||||
import KeyCode from './KeyCode'
|
||||
import TabContent from './TabContent'
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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}%`
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
// based on rc-time-picker 3.3.1
|
||||
export { default } from './TimePicker'
|
||||
|
|
Loading…
Reference in New Issue