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

update Steps

Browse source
This commit is contained in:
huixisheng 2017-03-01 23:24:23 +08:00
parent bd596e7add
commit b450b5553e
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 + '-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();
} }
} }

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

@ -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;
} }
} }
}, },

5
test/routers/steps.vue
View file

@ -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">