From 4f48dccb01d5ef2492cdb7b5aa3e1d4bc112c568 Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Fri, 9 Nov 2018 17:51:56 +0800 Subject: [PATCH] feat: update steps --- components/steps/index.jsx | 10 ++- components/vc-steps/Step.jsx | 14 +++- components/vc-steps/Steps.jsx | 16 +++- components/vc-steps/assets/iconfont.less | 2 +- components/vc-steps/assets/variables.less | 2 +- components/vc-steps/demo/custom-svg-icon.jsx | 79 ++++++++++++++++++++ 6 files changed, 112 insertions(+), 11 deletions(-) create mode 100644 components/vc-steps/demo/custom-svg-icon.jsx diff --git a/components/steps/index.jsx b/components/steps/index.jsx index 2dc0e13e4..ca75aecc7 100644 --- a/components/steps/index.jsx +++ b/components/steps/index.jsx @@ -1,6 +1,6 @@ import PropTypes from '../_util/vue-types' -import { initDefaultProps, getOptionProps } from '../_util/props-util' +import { initDefaultProps, getOptionProps, getComponentFromProp } from '../_util/props-util' import VcSteps from '../vc-steps' const getStepsProps = (defaultProps = {}) => { @@ -30,7 +30,13 @@ const Steps = { render () { const props = getOptionProps(this) const stepsProps = { - props, + props: { + ...props, + icons: props.icons || { + error: getComponentFromProp(this, 'icons.error'), + finish: getComponentFromProp(this, 'icons.finish'), + }, + }, on: this.$listeners, scopedSlots: this.$scopedSlots, } diff --git a/components/vc-steps/Step.jsx b/components/vc-steps/Step.jsx index 3d9029f98..dd46b2f8d 100644 --- a/components/vc-steps/Step.jsx +++ b/components/vc-steps/Step.jsx @@ -24,12 +24,16 @@ export default { PropTypes.func, ]), tailContent: PropTypes.any, + icons: PropTypes.shape({ + finish: PropTypes.any, + error: PropTypes.any, + }).loose, }, methods: { renderIconNode () { const { prefixCls, stepNumber, status, - iconPrefix, + iconPrefix, icons, } = getOptionProps(this) let progressDot = this.progressDot if (progressDot === undefined) { @@ -43,8 +47,8 @@ export default { [`${prefixCls}-icon`]: true, [`${iconPrefix}icon`]: true, [`${iconPrefix}icon-${icon}`]: icon && isString(icon), - [`${iconPrefix}icon-check`]: !icon && status === 'finish', - [`${iconPrefix}icon-cross`]: !icon && status === 'error', + [`${iconPrefix}icon-check`]: !icon && status === 'finish' && (icons && !icons.finish), + [`${iconPrefix}icon-close`]: !icon && status === 'error' && (icons && !icons.error), } const iconDot = // `progressDot` enjoy the highest priority @@ -60,6 +64,10 @@ export default { } } else if (icon && !isString(icon)) { iconNode = {icon} + } else if (icons && icons.finish && status === 'finish') { + iconNode = {icons.finish}; + } else if (icons && icons.error && status === 'error') { + iconNode = {icons.error}; } else if (icon || status === 'finish' || status === 'error') { iconNode = } else { diff --git a/components/vc-steps/Steps.jsx b/components/vc-steps/Steps.jsx index 35bf39fc0..e57452f7d 100644 --- a/components/vc-steps/Steps.jsx +++ b/components/vc-steps/Steps.jsx @@ -24,7 +24,12 @@ export default { PropTypes.bool, PropTypes.func, ]), + initial: PropTypes.number.def(0), current: PropTypes.number.def(0), + icons: PropTypes.shape({ + finish: PropTypes.any, + error: PropTypes.any, + }).loose, }, data () { this.calcStepOffsetWidth = debounce(this.calcStepOffsetWidth, 150) @@ -83,7 +88,8 @@ export default { render () { const { prefixCls, direction, - labelPlacement, iconPrefix, status, size, current, $scopedSlots, + labelPlacement, iconPrefix, status, size, current, $scopedSlots, initial, + icons, } = this let progressDot = this.progressDot if (progressDot === undefined) { @@ -110,12 +116,14 @@ export default { { filteredChildren.map((child, index) => { const childProps = getPropsData(child) + const stepNumber = initial + index; const stepProps = { props: { - stepNumber: `${index + 1}`, + stepNumber: `${stepNumber + 1}`, prefixCls, iconPrefix, progressDot: this.progressDot, + icons, ...childProps, }, on: getEvents(child), @@ -130,9 +138,9 @@ export default { stepProps.class = `${prefixCls}-next-error` } if (!childProps.status) { - if (index === current) { + if (stepNumber === current) { stepProps.props.status = status - } else if (index < current) { + } else if (stepNumber < current) { stepProps.props.status = 'finish' } else { stepProps.props.status = 'wait' diff --git a/components/vc-steps/assets/iconfont.less b/components/vc-steps/assets/iconfont.less index f80ba2e82..ecbf1b188 100644 --- a/components/vc-steps/assets/iconfont.less +++ b/components/vc-steps/assets/iconfont.less @@ -1,4 +1,4 @@ -@icon-url : "http://at.alicdn.com/t/font_1434092639_4910953"; +@icon-url : "//at.alicdn.com/t/font_1434092639_4910953"; .ie-rotate(@rotation) { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation); } diff --git a/components/vc-steps/assets/variables.less b/components/vc-steps/assets/variables.less index df17ca231..17480d180 100644 --- a/components/vc-steps/assets/variables.less +++ b/components/vc-steps/assets/variables.less @@ -6,7 +6,7 @@ @process-description-color: @process-title-color; @process-tail-color: #e9e9e9; @wait-icon-color: #ccc; -@wait-title-color: gba(0,0,0,.43); +@wait-title-color: rgba(0,0,0,.43); @wait-description-color: @wait-title-color; @wait-tail-color: @process-tail-color; @finish-icon-color: @process-icon-color; diff --git a/components/vc-steps/demo/custom-svg-icon.jsx b/components/vc-steps/demo/custom-svg-icon.jsx new file mode 100644 index 000000000..361eaa45f --- /dev/null +++ b/components/vc-steps/demo/custom-svg-icon.jsx @@ -0,0 +1,79 @@ +import Steps, { Step } from '../index' +import '../assets/index.less' +import '../assets/iconfont.less' + + +export default { + methods: { + getFinishIcon() { + const path = 'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' + + '5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139' + + '.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5' + + '-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 ' + + '55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33' + + '.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99' + + '.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.' + + '7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 10' + + '1.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 ' + + '20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z'; + return ( + + + + ); + }, + getErrorIcon() { + const path1 = 'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' + + '.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 9' + + '4.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99' + + '.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.' + + '4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-4' + + '0.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 3' + + '4.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C' + + '940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 9' + + '9.5-94.4 139.9z'; + const path2 = 'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' + + '.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0' + + '-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36' + + '-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382' + + '.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z'; + return ( + + + + + ); + }, + }, + render () { + const settings = { + props: { + current: 1, + status: 'error', + icons: { + finish: this.getFinishIcon(), + error: this.getErrorIcon(), + }, + }, + } + return ( + + + + + + ) + }, +}