add Steps UI
add Steps UI
This commit is contained in:
梁灏
parent
93064e3b74
commit
45b672cad9
8 changed files with 442 additions and 11 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="wrapClasses">
|
<div :class="wrapClasses" :style="styles">
|
||||||
<div :class="[`${prefixCls}-tail`]"></div>
|
<div :class="[`${prefixCls}-tail`]"><i></i></div>
|
||||||
<div :class="[`${prefixCls}-head`]">
|
<div :class="[`${prefixCls}-head`]">
|
||||||
<div :class="[`${prefixCls}-head-inner`]">
|
<div :class="[`${prefixCls}-head-inner`]">
|
||||||
<span v-if="!icon && status != 'finish' && status != 'error'">{{ stepNumber }}</span>
|
<span v-if="!icon && status != 'finish' && status != 'error'">{{ stepNumber }}</span>
|
||||||
|
|
@ -41,7 +41,8 @@
|
||||||
return {
|
return {
|
||||||
prefixCls: prefixCls,
|
prefixCls: prefixCls,
|
||||||
stepNumber: '',
|
stepNumber: '',
|
||||||
nextError: false
|
nextError: false,
|
||||||
|
total: 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -75,6 +76,11 @@
|
||||||
[`${iconPrefixCls}-${icon}`]: icon != ''
|
[`${iconPrefixCls}-${icon}`]: icon != ''
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
styles () {
|
||||||
|
return {
|
||||||
|
width: `${1/this.total*100}%`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
|
||||||
|
|
@ -50,9 +50,14 @@
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChildProps (isInit) {
|
updateChildProps (isInit) {
|
||||||
|
const total = this.$children.length;
|
||||||
this.$children.forEach((child, index) => {
|
this.$children.forEach((child, index) => {
|
||||||
child.stepNumber = index + 1;
|
child.stepNumber = index + 1;
|
||||||
|
|
||||||
|
if (this.direction === 'horizontal') {
|
||||||
|
child.total = total;
|
||||||
|
}
|
||||||
|
|
||||||
// 如果已存在status,且在初始化时,则略过
|
// 如果已存在status,且在初始化时,则略过
|
||||||
// todo 如果当前是error,在current改变时需要处理
|
// todo 如果当前是error,在current改变时需要处理
|
||||||
if (!(isInit && child.status)) {
|
if (!(isInit && child.status)) {
|
||||||
|
|
|
||||||
2
dist/styles/iview.all.css
vendored
2
dist/styles/iview.all.css
vendored
File diff suppressed because one or more lines are too long
2
dist/styles/iview.css
vendored
2
dist/styles/iview.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -4,21 +4,80 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<Page :current="1" :total="total" show-sizer show-total show-elevator :page-size="10" simple @on-change="setPage"></Page>
|
<Steps :current="1" size="small">
|
||||||
|
<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
||||||
|
</Steps>
|
||||||
|
<br>
|
||||||
|
<Steps :current="2">
|
||||||
|
<Step title="已完成"></Step>
|
||||||
|
<Step title="进行中"></Step>
|
||||||
|
<Step title="待进行"></Step>
|
||||||
|
<Step title="待进行"></Step>
|
||||||
|
</Steps>
|
||||||
|
<br>
|
||||||
|
<Steps :current="1" size="small">
|
||||||
|
<Step title="已完成"></Step>
|
||||||
|
<Step title="进行中"></Step>
|
||||||
|
<Step title="待进行"></Step>
|
||||||
|
<Step title="待进行"></Step>
|
||||||
|
</Steps>
|
||||||
|
<br>
|
||||||
|
<Steps :current="1" direction="vertical" size="small">
|
||||||
|
<Step title="注册" icon="person-add"></Step>
|
||||||
|
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="验证邮箱" icon="email"></Step>
|
||||||
|
</Steps>
|
||||||
|
<Steps :current="1" direction="vertical">
|
||||||
|
<Step title="注册" icon="person-add"></Step>
|
||||||
|
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="验证邮箱" icon="email"></Step>
|
||||||
|
</Steps>
|
||||||
|
<br>
|
||||||
|
<p>当前正在进行第 {{ current + 1 }} 步</p>
|
||||||
|
<Steps :current="current">
|
||||||
|
<Step title="步骤1"></Step>
|
||||||
|
<Step title="步骤2"></Step>
|
||||||
|
<Step title="步骤3"></Step>
|
||||||
|
<Step title="步骤4"></Step>
|
||||||
|
</Steps>
|
||||||
|
<Button type="primary" @click="next">下一步</Button>
|
||||||
|
<br><br>
|
||||||
|
<Steps :current="1" direction="vertical" size="small">
|
||||||
|
<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
||||||
|
</Steps>
|
||||||
|
<br><br>
|
||||||
|
<Steps :current="1" status="error">
|
||||||
|
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
||||||
|
</Steps>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Page } from 'iview';
|
import { Page, Steps, Button } from 'iview';
|
||||||
|
|
||||||
|
const Step = Steps.Step;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Page
|
Page,
|
||||||
|
Steps,
|
||||||
|
Step,
|
||||||
|
Button
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
total: 512
|
total: 512,
|
||||||
|
current: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -27,6 +86,13 @@
|
||||||
methods: {
|
methods: {
|
||||||
setPage (page) {
|
setPage (page) {
|
||||||
console.log(page)
|
console.log(page)
|
||||||
|
},
|
||||||
|
next () {
|
||||||
|
if (this.current == 3) {
|
||||||
|
this.current = 0;
|
||||||
|
} else {
|
||||||
|
this.current += 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iview",
|
"name": "iview",
|
||||||
"version": "0.0.22",
|
"version": "0.0.23",
|
||||||
"title": "iView",
|
"title": "iView",
|
||||||
"description": "A high quality UI components Library with Vue.js",
|
"description": "A high quality UI components Library with Vue.js",
|
||||||
"homepage": "http://www.iviewui.com",
|
"homepage": "http://www.iviewui.com",
|
||||||
|
|
|
||||||
|
|
@ -17,4 +17,5 @@
|
||||||
@import "loading-bar";
|
@import "loading-bar";
|
||||||
@import "progress";
|
@import "progress";
|
||||||
@import "timeline";
|
@import "timeline";
|
||||||
@import "page";
|
@import "page";
|
||||||
|
@import "steps";
|
||||||
353
styles/components/steps.less
Normal file
353
styles/components/steps.less
Normal file
|
|
@ -0,0 +1,353 @@
|
||||||
|
@steps-prefix-cls: ~"@{css-prefix}steps";
|
||||||
|
@steps-wait-icon-color: #ccc;
|
||||||
|
@steps-wait-title-color: #999;
|
||||||
|
@steps-wait-description-color: @steps-wait-title-color;
|
||||||
|
@steps-wait-tail-color: @border-color-split;
|
||||||
|
@steps-title-color: #666;
|
||||||
|
|
||||||
|
.@{steps-prefix-cls} {
|
||||||
|
font-size: 0;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
&-item{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
&.@{steps-prefix-cls}-status-wait{
|
||||||
|
.@{steps-prefix-cls}-head-inner {
|
||||||
|
background-color: #fff;
|
||||||
|
> .@{steps-prefix-cls}-icon, span {
|
||||||
|
color: @steps-wait-icon-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
color: @steps-wait-title-color;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-content {
|
||||||
|
color: @steps-wait-description-color;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-tail > i {
|
||||||
|
background-color: @steps-wait-tail-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.@{steps-prefix-cls}-status-process {
|
||||||
|
.@{steps-prefix-cls}-head-inner {
|
||||||
|
border-color: @primary-color;
|
||||||
|
background-color: @primary-color;
|
||||||
|
> .@{steps-prefix-cls}-icon, span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
color: @steps-title-color;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-content {
|
||||||
|
color: @steps-title-color;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-tail > i {
|
||||||
|
background-color: @border-color-split;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.@{steps-prefix-cls}-status-finish {
|
||||||
|
.@{steps-prefix-cls}-head-inner {
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: @primary-color;
|
||||||
|
> .@{steps-prefix-cls}-icon, span {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-tail > i:after {
|
||||||
|
width: 100%;
|
||||||
|
background: @primary-color;
|
||||||
|
.transition(all @transition-time @ease-in-out);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
color: @steps-wait-title-color;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-content {
|
||||||
|
color: @steps-wait-description-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{steps-prefix-cls}-status-error {
|
||||||
|
.@{steps-prefix-cls}-head-inner {
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: @error-color;
|
||||||
|
> .@{steps-prefix-cls}-icon {
|
||||||
|
color: @error-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
color: @error-color;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-content {
|
||||||
|
color: @error-color;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-tail > i {
|
||||||
|
background-color: @border-color-split;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{steps-prefix-cls}-next-error {
|
||||||
|
.@{steps-prefix-cls}-tail > i,
|
||||||
|
.@{steps-prefix-cls}-tail > i:after {
|
||||||
|
background-color: @error-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{steps-prefix-cls}-custom {
|
||||||
|
.@{steps-prefix-cls}-head-inner {
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
> .@{steps-prefix-cls}-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
top: 2px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.@{steps-prefix-cls}-status-process {
|
||||||
|
.@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-item:last-child &-tail{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-head,
|
||||||
|
.@{steps-prefix-cls}-main {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-head {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-head-inner {
|
||||||
|
display: block;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-right: 8px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid @steps-wait-icon-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 14px;
|
||||||
|
.transition(background-color @transition-time @ease-in-out);
|
||||||
|
|
||||||
|
> .@{steps-prefix-cls}-icon {
|
||||||
|
line-height: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.ivu-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
&-ios-checkmark-empty,
|
||||||
|
&-ios-close-empty {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-main {
|
||||||
|
margin-top: 2.5px;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-title{
|
||||||
|
margin-top: 2.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
padding-right: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
> a:first-child:last-child {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-item-last {
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
padding-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-content {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-tail {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 10px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 13px;
|
||||||
|
> i {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
vertical-align: top;
|
||||||
|
background: @border-color-split;
|
||||||
|
border-radius: 1px;
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
background: @border-color-split;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{steps-prefix-cls}-small {
|
||||||
|
.@{steps-prefix-cls}-head-inner {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-right: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
> .@{steps-prefix-cls}-icon.ivu-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-main {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
margin-top: 0;
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-content {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-tail {
|
||||||
|
top: 8px;
|
||||||
|
padding: 0 8px;
|
||||||
|
> i {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner,
|
||||||
|
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-vertical {
|
||||||
|
.@{steps-prefix-cls}-item {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-tail {
|
||||||
|
position: absolute;
|
||||||
|
left: 13px;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
padding: 30px 0 4px 0;
|
||||||
|
> i {
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
&:after {
|
||||||
|
height: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-status-finish {
|
||||||
|
.@{steps-prefix-cls}-tail > i:after {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-head {
|
||||||
|
float: left;
|
||||||
|
&-inner {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-main {
|
||||||
|
min-height: 47px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-content {
|
||||||
|
padding-bottom: 12px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon {
|
||||||
|
left: 4px;
|
||||||
|
}
|
||||||
|
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-small {
|
||||||
|
.@{steps-prefix-cls}-tail {
|
||||||
|
position: absolute;
|
||||||
|
left: 9px;
|
||||||
|
top: 0;
|
||||||
|
padding: 22px 0 4px 0;
|
||||||
|
> i {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{steps-prefix-cls}-horizontal {
|
||||||
|
&.@{steps-prefix-cls}-hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-content {
|
||||||
|
//max-width: 100px;
|
||||||
|
padding-left: 35px;
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue