wangxueliang
7 years ago
parent
4dc069ab05
commit
bdfaf20927
@ -0,0 +1,111 @@
|
||||
<script>
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import { getOptionProps } from '../_util/props-util'
|
||||
|
||||
function isString (str) {
|
||||
return typeof str === 'string'
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Step',
|
||||
props: {
|
||||
prefixCls: PropTypes.string,
|
||||
wrapperStyle: PropTypes.object,
|
||||
// itemWidth: PropTypes.oneOfType([
|
||||
// PropTypes.number,
|
||||
// PropTypes.string,
|
||||
// ]),
|
||||
status: PropTypes.string,
|
||||
iconPrefix: PropTypes.string,
|
||||
icon: PropTypes.node,
|
||||
// adjustMarginRight: PropTypes.oneOfType([
|
||||
// PropTypes.number,
|
||||
// PropTypes.string,
|
||||
// ]),
|
||||
stepNumber: PropTypes.string,
|
||||
description: PropTypes.any,
|
||||
title: PropTypes.any,
|
||||
progressDot: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.func,
|
||||
]),
|
||||
tailContent: PropTypes.any,
|
||||
},
|
||||
methods: {
|
||||
renderIconNode () {
|
||||
const {
|
||||
prefixCls, progressDot, stepNumber, status, title, description, icon,
|
||||
iconPrefix,
|
||||
} = getOptionProps(this)
|
||||
let iconNode
|
||||
const iconClassName = {
|
||||
[`${prefixCls}-icon`]: true,
|
||||
[`${iconPrefix}icon`]: true,
|
||||
[`${iconPrefix}icon-${icon}`]: icon && isString(icon),
|
||||
[`${iconPrefix}icon-check`]: !icon && status === 'finish',
|
||||
[`${iconPrefix}icon-cross`]: !icon && status === 'error',
|
||||
}
|
||||
const iconDot = <span class={`${prefixCls}-icon-dot`}></span>
|
||||
// `progressDot` enjoy the highest priority
|
||||
if (progressDot) {
|
||||
if (typeof progressDot === 'function') {
|
||||
iconNode = (
|
||||
<span class={`${prefixCls}-icon`}>
|
||||
{progressDot(iconDot, { index: stepNumber - 1, status, title, description })}
|
||||
</span>
|
||||
)
|
||||
} else {
|
||||
iconNode = <span class={`${prefixCls}-icon`}>{iconDot}</span>
|
||||
}
|
||||
} else if (icon && !isString(icon)) {
|
||||
iconNode = <span class={`${prefixCls}-icon`}>{icon}</span>
|
||||
} else if (icon || status === 'finish' || status === 'error') {
|
||||
iconNode = <span class={iconClassName} />
|
||||
} else {
|
||||
iconNode = <span class={`${prefixCls}-icon`}>{stepNumber}</span>
|
||||
}
|
||||
return iconNode
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const {
|
||||
prefixCls,
|
||||
status = 'wait', icon,
|
||||
description, title, tailContent,
|
||||
...restProps
|
||||
} = getOptionProps(this)
|
||||
|
||||
const classString = {
|
||||
[`${prefixCls}-item`]: true,
|
||||
[`${prefixCls}-item-${status}`]: true,
|
||||
[`${prefixCls}-item-custom`]: icon,
|
||||
}
|
||||
const stepProps = {
|
||||
props: {
|
||||
...restProps,
|
||||
},
|
||||
class: classString,
|
||||
on: this.$listeners,
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
{...stepProps}
|
||||
>
|
||||
<div class={`${prefixCls}-item-tail`}>
|
||||
{tailContent}
|
||||
</div>
|
||||
<div class={`${prefixCls}-item-icon`}>
|
||||
{this.renderIconNode()}
|
||||
</div>
|
||||
<div class={`${prefixCls}-item-content`}>
|
||||
<div class={`${prefixCls}-item-title`}>
|
||||
{title}
|
||||
</div>
|
||||
{description && <div class={`${prefixCls}-item-description`}>{description}</div>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,144 @@
|
||||
<script>
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import debounce from 'lodash/debounce'
|
||||
import isFlexSupported from '../_util/isFlexSupported'
|
||||
import { getOptionProps, filterEmpty, getEvents, getClass, getStyle, getValueByProp } from '../_util/props-util'
|
||||
import { cloneElement } from '../_util/vnode'
|
||||
|
||||
export default {
|
||||
name: 'Steps',
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
prefixCls: PropTypes.string.def('rc-steps'),
|
||||
iconPrefix: PropTypes.string.def('rc'),
|
||||
direction: PropTypes.string.def('horizontal'),
|
||||
labelPlacement: PropTypes.string.def('horizontal'),
|
||||
children: PropTypes.any,
|
||||
status: PropTypes.string.def('process'),
|
||||
size: PropTypes.string.def(''),
|
||||
progressDot: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.func,
|
||||
]).def(false),
|
||||
current: PropTypes.number.def(0),
|
||||
},
|
||||
data () {
|
||||
this.calcStepOffsetWidth = debounce(this.calcStepOffsetWidth, 150)
|
||||
return {
|
||||
flexSupported: true,
|
||||
lastStepOffsetWidth: 0,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.calcStepOffsetWidth()
|
||||
if (!isFlexSupported()) {
|
||||
this.setState({
|
||||
flexSupported: false,
|
||||
})
|
||||
}
|
||||
},
|
||||
updated () {
|
||||
this.calcStepOffsetWidth()
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.calcTimeout) {
|
||||
clearTimeout(this.calcTimeout)
|
||||
}
|
||||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
|
||||
this.calcStepOffsetWidth.cancel()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcStepOffsetWidth () {
|
||||
if (isFlexSupported()) {
|
||||
return
|
||||
}
|
||||
// Just for IE9
|
||||
const domNode = this.$refs.vcStepsRef
|
||||
if (domNode.children.length > 0) {
|
||||
if (this.calcTimeout) {
|
||||
clearTimeout(this.calcTimeout)
|
||||
}
|
||||
this.calcTimeout = setTimeout(() => {
|
||||
// +1 for fit edge bug of digit width, like 35.4px
|
||||
const lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1
|
||||
// Reduce shake bug
|
||||
if (this.state.lastStepOffsetWidth === lastStepOffsetWidth ||
|
||||
Math.abs(this.state.lastStepOffsetWidth - lastStepOffsetWidth) <= 3) {
|
||||
return
|
||||
}
|
||||
this.setState({ lastStepOffsetWidth })
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const {
|
||||
prefixCls, direction,
|
||||
labelPlacement, iconPrefix, status, size, current, progressDot,
|
||||
...restProps
|
||||
} = getOptionProps(this)
|
||||
const { lastStepOffsetWidth, flexSupported } = this
|
||||
const filteredChildren = filterEmpty(this.$slots.default)
|
||||
const lastIndex = filteredChildren.length - 1
|
||||
const adjustedlabelPlacement = progressDot ? 'vertical' : labelPlacement
|
||||
const classString = {
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${direction}`]: true,
|
||||
[`${prefixCls}-${size}`]: size,
|
||||
[`${prefixCls}-label-${adjustedlabelPlacement}`]: direction === 'horizontal',
|
||||
[`${prefixCls}-dot`]: !!progressDot,
|
||||
}
|
||||
const stepsProps = {
|
||||
attrs: {
|
||||
...restProps,
|
||||
},
|
||||
class: classString,
|
||||
ref: 'vcStepsRef',
|
||||
on: this.$listeners,
|
||||
}
|
||||
return (
|
||||
<div {...stepsProps}>
|
||||
{
|
||||
filteredChildren.map((child, index) => {
|
||||
let className = getClass(child)
|
||||
// fix tail color
|
||||
if (status === 'error' && index === current - 1) {
|
||||
className += ` ${prefixCls}-next-error`
|
||||
}
|
||||
let stepStatus = getValueByProp(child, 'status')
|
||||
if (!stepStatus) {
|
||||
if (index === current) {
|
||||
stepStatus = status
|
||||
} else if (index < current) {
|
||||
stepStatus = 'finish'
|
||||
} else {
|
||||
stepStatus = 'wait'
|
||||
}
|
||||
}
|
||||
const stepStyle = getStyle(child)
|
||||
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
|
||||
stepStyle.width = `${100 / lastIndex}%`
|
||||
stepStyle.marginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1)
|
||||
}
|
||||
const stepProps = {
|
||||
props: {
|
||||
stepNumber: `${index + 1}`,
|
||||
prefixCls,
|
||||
iconPrefix,
|
||||
progressDot,
|
||||
status: stepStatus,
|
||||
},
|
||||
on: getEvents(child),
|
||||
class: className,
|
||||
style: stepStyle,
|
||||
}
|
||||
return cloneElement(child, stepProps)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,21 @@
|
||||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-item-custom {
|
||||
.@{stepsPrefixClass}-item-icon {
|
||||
background: none;
|
||||
border: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
font-size: 20px;
|
||||
top: 1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
&.@{stepsPrefixClass}-item-process {
|
||||
.@{stepsPrefixClass}-item-icon > .@{stepsPrefixClass}-icon {
|
||||
color: @process-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,168 @@
|
||||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass} {
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
|
||||
&,
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.@{stepsPrefixClass}-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&:last-child {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&:last-child &-tail,
|
||||
&:last-child &-title:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-icon,
|
||||
&-content {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
border: 1px solid @wait-icon-color;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
transition: background-color .3s, border-color .3s;
|
||||
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
line-height: 1;
|
||||
top: -1px;
|
||||
color: @primary-color;
|
||||
position: relative;
|
||||
|
||||
&.rcicon {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-tail {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 12px;
|
||||
padding: 0 10px;
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: @wait-tail-color;
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
width: 100%;
|
||||
transition: background .3s;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
margin-top: 3px;
|
||||
}
|
||||
&-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 1000px;
|
||||
background: @wait-tail-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.55em;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.step-item-status(wait);
|
||||
.step-item-status(process);
|
||||
&-process &-icon {
|
||||
background: @process-icon-color;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.step-item-status(finish);
|
||||
.step-item-status(error);
|
||||
|
||||
&.@{stepsPrefixClass}-next-error .@{stepsPrefixClass}-item-title:after {
|
||||
background: @error-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{stepsPrefixClass}-horizontal:not(.@{stepsPrefixClass}-label-vertical) {
|
||||
.@{stepsPrefixClass}-item {
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&-tail {
|
||||
display: none;
|
||||
}
|
||||
&-description {
|
||||
max-width: @stepDescriptionMaxWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-status(@status) {
|
||||
@icon-color: "@{status}-icon-color";
|
||||
@title-color: "@{status}-title-color";
|
||||
@description-color: "@{status}-description-color";
|
||||
@tail-color: "@{status}-tail-color";
|
||||
&-@{status} &-icon {
|
||||
border-color: @@icon-color;
|
||||
background-color: #fff;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
color: @@icon-color;
|
||||
.@{stepsPrefixClass}-icon-dot {
|
||||
background: @@icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-@{status} &-title {
|
||||
color: @@title-color;
|
||||
&:after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
}
|
||||
&-@{status} &-description {
|
||||
color: @@description-color;
|
||||
}
|
||||
&-@{status} &-tail:after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'custom-icon';
|
||||
@import 'small';
|
||||
@import 'vertical';
|
||||
@import 'label-placement';
|
||||
@import 'progress-dot';
|
||||
@ -0,0 +1,30 @@
|
||||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-label-vertical {
|
||||
.@{stepsPrefixClass}-item {
|
||||
overflow: visible;
|
||||
&-tail {
|
||||
padding: 0px 24px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
&-content {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
width: @stepDescriptionMaxWidth;
|
||||
}
|
||||
&-icon {
|
||||
display: inline-block;
|
||||
margin-left: 36px;
|
||||
}
|
||||
&-title {
|
||||
padding-right: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-dot {
|
||||
.@{stepsPrefixClass}-item {
|
||||
&-tail {
|
||||
width: 100%;
|
||||
top: 1px;
|
||||
margin: 0 0 0 @stepDescriptionMaxWidth / 2;
|
||||
padding: 0;
|
||||
|
||||
&:after {
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
padding-right: 0;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
line-height: 5px;
|
||||
border: 0;
|
||||
margin-left: 48px;
|
||||
.@{stepsPrefixClass}-icon-dot {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2.5px;
|
||||
}
|
||||
}
|
||||
&-process &-icon {
|
||||
top: -1px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
line-height: 7px;
|
||||
.@{stepsPrefixClass}-icon-dot {
|
||||
border-radius: 3.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-small {
|
||||
.@{stepsPrefixClass}-item-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
font-size: 12px;
|
||||
font-size: ~"9px \9"; // ie8-9
|
||||
transform: scale(.75);
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
.@{stepsPrefixClass}-item-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
.@{stepsPrefixClass}-item-title {
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
.@{stepsPrefixClass}-item-description {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.@{stepsPrefixClass}-item-tail {
|
||||
top: 8px;
|
||||
padding: 0 8px;
|
||||
&:after {
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{stepsPrefixClass}-item-custom .@{stepsPrefixClass}-item-icon {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
font-size: 20px;
|
||||
top: -2.5px;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
@stepsPrefixClass: ~"rc-steps";
|
||||
@stepDescriptionMaxWidth: 100px;
|
||||
@primary-color: #108ee9;
|
||||
@process-icon-color: @primary-color;
|
||||
@process-title-color: rgba(0,0,0,.65);
|
||||
@process-description-color: @process-title-color;
|
||||
@process-tail-color: #e9e9e9;
|
||||
@wait-icon-color: #ccc;
|
||||
@wait-title-color: gba(0,0,0,.43);
|
||||
@wait-description-color: @wait-title-color;
|
||||
@wait-tail-color: @process-tail-color;
|
||||
@finish-icon-color: @process-icon-color;
|
||||
@finish-title-color: @wait-title-color;
|
||||
@finish-description-color: @finish-title-color;
|
||||
@finish-tail-color: @process-icon-color;
|
||||
@error-icon-color: #f50;
|
||||
@error-title-color: @error-icon-color;
|
||||
@error-description-color: @error-icon-color;
|
||||
@error-tail-color: @process-tail-color;
|
||||
@ -0,0 +1,53 @@
|
||||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-vertical {
|
||||
display: block;
|
||||
.@{stepsPrefixClass}-item {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
&-icon {
|
||||
float: left;
|
||||
&-inner {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
&-title {
|
||||
line-height: 26px;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
&-tail {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
padding: 30px 0 4px 0;
|
||||
&:after {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{stepsPrefixClass}-small {
|
||||
.@{stepsPrefixClass}-item-tail {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 0;
|
||||
padding: 22px 0 4px 0;
|
||||
}
|
||||
.@{stepsPrefixClass}-item-title {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import Steps, { Step } from '../index'
|
||||
import '../assets/index.less'
|
||||
import '../assets/iconfont.less'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊',
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { description } = this
|
||||
return (
|
||||
<Steps labelPlacement='vertical' current={1}>
|
||||
<Step title='已完成' description={description} />
|
||||
<Step title='进行中' description={description} />
|
||||
<Step title='待运行' description={description} />
|
||||
<Step title='待运行' description={description} />
|
||||
<Step title='待运行' description={description} />
|
||||
</Steps>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,24 @@
|
||||
<script>
|
||||
import Steps, { Step } from '../index'
|
||||
import '../assets/index.less'
|
||||
import '../assets/iconfont.less'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊',
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { description } = this
|
||||
return (
|
||||
<Steps current={1}>
|
||||
<Step title='已完成' description={description} />
|
||||
<Step title='进行中' description={description} />
|
||||
<Step title='进行中' description={description} style={{ fontWeight: 'bold', fontStyle: 'italic' }}/>
|
||||
<Step title='待运行' description={description} />
|
||||
</Steps>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import Steps, { Step } from '../index'
|
||||
import '../assets/index.less'
|
||||
import '../assets/iconfont.less'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const Icon = ({ type }) => <i className={`rcicon rcicon-${type}`} />
|
||||
return (
|
||||
<Steps current={1}>
|
||||
<Step title='步骤1' icon={<Icon type='cloud' />} />
|
||||
<Step title='步骤2' icon='apple' />
|
||||
<Step title='步骤3' icon='github' />
|
||||
</Steps>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,7 @@
|
||||
import Steps from './Steps'
|
||||
import Step from './Step'
|
||||
|
||||
Steps.Step = Step
|
||||
|
||||
export { Step }
|
||||
export default Steps
|
||||
Loading…
Reference in new issue