update Steps
This commit is contained in:
huixisheng
parent
bd596e7add
commit
b450b5553e
3 changed files with 34 additions and 21 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
<div :class="[prefixCls + '-tail']"><i></i></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 && currentStatus != 'finish' && currentStatus != 'error'">{{ stepNumber }}</span>
|
||||||
<span v-else :class="iconClasses"></span>
|
<span v-else :class="iconClasses"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -21,11 +21,11 @@
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
// status: {
|
status: {
|
||||||
// validator (value) {
|
validator (value) {
|
||||||
// return oneOf(value, ['wait', 'process', 'finish', 'error']);
|
return oneOf(value, ['wait', 'process', 'finish', 'error']);
|
||||||
// }
|
}
|
||||||
// },
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
@ -43,14 +43,17 @@
|
||||||
stepNumber: '',
|
stepNumber: '',
|
||||||
nextError: false,
|
nextError: false,
|
||||||
total: 1,
|
total: 1,
|
||||||
status: ''
|
currentStatus: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
created () {
|
||||||
|
this.currentStatus = this.status;
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
wrapClasses () {
|
wrapClasses () {
|
||||||
return [
|
return [
|
||||||
`${prefixCls}-item`,
|
`${prefixCls}-item`,
|
||||||
`${prefixCls}-status-${this.status}`,
|
`${prefixCls}-status-${this.currentStatus}`,
|
||||||
{
|
{
|
||||||
[`${prefixCls}-custom`]: !!this.icon,
|
[`${prefixCls}-custom`]: !!this.icon,
|
||||||
[`${prefixCls}-next-error`]: this.nextError
|
[`${prefixCls}-next-error`]: this.nextError
|
||||||
|
|
@ -63,9 +66,9 @@
|
||||||
if (this.icon) {
|
if (this.icon) {
|
||||||
icon = this.icon;
|
icon = this.icon;
|
||||||
} else {
|
} else {
|
||||||
if (this.status == 'finish') {
|
if (this.currentStatus == 'finish') {
|
||||||
icon = 'ios-checkmark-empty';
|
icon = 'ios-checkmark-empty';
|
||||||
} else if (this.status == 'error') {
|
} else if (this.currentStatus == 'error') {
|
||||||
icon = 'ios-close-empty';
|
icon = 'ios-close-empty';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -85,8 +88,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
status () {
|
status (val) {
|
||||||
if (this.status == 'error') {
|
this.currentStatus = val;
|
||||||
|
if (this.currentStatus == 'error') {
|
||||||
this.$parent.setNextError();
|
this.$parent.setNextError();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -60,38 +60,42 @@
|
||||||
|
|
||||||
// 如果已存在status,且在初始化时,则略过
|
// 如果已存在status,且在初始化时,则略过
|
||||||
// todo 如果当前是error,在current改变时需要处理
|
// todo 如果当前是error,在current改变时需要处理
|
||||||
if (!(isInit && child.status)) {
|
if (!(isInit && child.currentStatus)) {
|
||||||
if (index == this.current) {
|
if (index == this.current) {
|
||||||
if (this.status != 'error') {
|
if (this.status != 'error') {
|
||||||
child.status = 'process';
|
child.currentStatus = 'process';
|
||||||
}
|
}
|
||||||
} else if (index < this.current) {
|
} else if (index < this.current) {
|
||||||
child.status = 'finish';
|
child.currentStatus = 'finish';
|
||||||
} else {
|
} else {
|
||||||
child.status = 'wait';
|
child.currentStatus = 'wait';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (child.status != 'error' && index != 0) {
|
if (child.currentStatus != 'error' && index != 0) {
|
||||||
this.$children[index - 1].nextError = false;
|
this.$children[index - 1].nextError = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
setNextError () {
|
setNextError () {
|
||||||
this.$children.forEach((child, index) => {
|
this.$children.forEach((child, index) => {
|
||||||
if (child.status == 'error' && index != 0) {
|
if (child.currentStatus == 'error' && index != 0) {
|
||||||
this.$children[index - 1].nextError = true;
|
this.$children[index - 1].nextError = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
updateCurrent (isInit) {
|
updateCurrent (isInit) {
|
||||||
|
// 防止溢出边界
|
||||||
|
if (this.current < 0 || this.current >= this.$children.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (isInit) {
|
if (isInit) {
|
||||||
const current_status = this.$children[this.current].status;
|
const current_status = this.$children[this.current].currentStatus;
|
||||||
if (!current_status) {
|
if (!current_status) {
|
||||||
this.$children[this.current].status = this.status;
|
this.$children[this.current].currentStatus = this.status;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.$children[this.current].status = this.status;
|
this.$children[this.current].currentStatus = this.status;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,11 @@
|
||||||
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
||||||
<Step title="验证邮箱" icon="email"></Step>
|
<Step title="验证邮箱" icon="email"></Step>
|
||||||
</Steps>
|
</Steps>
|
||||||
|
<Steps :current="-1" direction="vertical">
|
||||||
|
<Step title="注册" icon="person-add"></Step>
|
||||||
|
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
||||||
|
<Step title="验证邮箱" status="finish" icon="email"></Step>
|
||||||
|
</Steps>
|
||||||
<br>
|
<br>
|
||||||
<p>当前正在进行第 {{ current + 1 }} 步</p>
|
<p>当前正在进行第 {{ current + 1 }} 步</p>
|
||||||
<Steps :current="current">
|
<Steps :current="current">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue