update vc-xxx
parent
f0918f2b76
commit
e55ccd2262
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
|
||||||
```
|
```
|
||||||
|
|
|
@ -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` |
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 |
|
||||||
|
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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}%`
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -1 +1,2 @@
|
||||||
|
// based on rc-time-picker 3.3.1
|
||||||
export { default } from './TimePicker'
|
export { default } from './TimePicker'
|
||||||
|
|
Loading…
Reference in New Issue