drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feature-steps' into feature-timeline

Browse source
This commit is contained in:
huixisheng 2017-03-02 09:11:25 +08:00
commit 85b0f07ed0
3 changed files with 34 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/steps/step.vue
View file

@ -3,7 +3,7 @@
<div :class="[prefixCls + '-tail']"><i></i></div>
<div :class="[prefixCls + '-head']">
<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>
</div>
</div>
@ -21,11 +21,11 @@
export default {
props: {
// status: {
// validator (value) {
// return oneOf(value, ['wait', 'process', 'finish', 'error']);
// }
// },
status: {
validator (value) {
return oneOf(value, ['wait', 'process', 'finish', 'error']);
}
},
title: {
type: String,
default: ''
@ -43,14 +43,17 @@
stepNumber: '',
nextError: false,
total: 1,
status: ''
currentStatus: ''
};
},
created () {
this.currentStatus = this.status;
},
computed: {
wrapClasses () {
return [
`${prefixCls}-item`,
`${prefixCls}-status-${this.status}`,
`${prefixCls}-status-${this.currentStatus}`,
{
[`${prefixCls}-custom`]: !!this.icon,
[`${prefixCls}-next-error`]: this.nextError
@ -63,9 +66,9 @@
if (this.icon) {
icon = this.icon;
} else {
if (this.status == 'finish') {
if (this.currentStatus == 'finish') {
icon = 'ios-checkmark-empty';
} else if (this.status == 'error') {
} else if (this.currentStatus == 'error') {
icon = 'ios-close-empty';
}
}
@ -85,8 +88,9 @@
}
},
watch: {
status () {
if (this.status == 'error') {
status (val) {
this.currentStatus = val;
if (this.currentStatus == 'error') {
this.$parent.setNextError();
}
}

22
src/components/steps/steps.vue
View file

@ -60,38 +60,42 @@
// 如果已存在status,且在初始化时,则略过
// todo 如果当前是error,在current改变时需要处理
if (!(isInit && child.status)) {
if (!(isInit && child.currentStatus)) {
if (index == this.current) {
if (this.status != 'error') {
child.status = 'process';
child.currentStatus = 'process';
}
} else if (index < this.current) {
child.status = 'finish';
child.currentStatus = 'finish';
} 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;
}
});
},
setNextError () {
this.$children.forEach((child, index) => {
if (child.status == 'error' && index != 0) {
if (child.currentStatus == 'error' && index != 0) {
this.$children[index - 1].nextError = true;
}
});
},
updateCurrent (isInit) {
// 防止溢出边界
if (this.current < 0 || this.current >= this.$children.length ) {
return;
}
if (isInit) {
const current_status = this.$children[this.current].status;
const current_status = this.$children[this.current].currentStatus;
if (!current_status) {
this.$children[this.current].status = this.status;
this.$children[this.current].currentStatus = this.status;
}
} else {
this.$children[this.current].status = this.status;
this.$children[this.current].currentStatus = this.status;
}
}
},

5
test/routers/steps.vue
View file

@ -31,6 +31,11 @@
<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="验证邮箱" status="finish" icon="email"></Step>
</Steps>
<br>
<p>当前正在进行第 {{ current + 1 }} 步</p>
<Steps :current="current">