update Steps
This commit is contained in:
梁灏
parent
0460a1e811
commit
d4cd421cc2
3 changed files with 157 additions and 82 deletions
|
|
@ -1,79 +1,87 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Steps :current="1" size="small">
|
<Steps :current="index">
|
||||||
<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
<!--<Step title="开始"></Step>-->
|
||||||
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
|
<Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
|
||||||
<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
|
<!--<Step title="结束"></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>
|
|
||||||
<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">
|
|
||||||
<Step title="步骤1"></Step>
|
|
||||||
<Step title="步骤2"></Step>
|
|
||||||
<Step title="步骤3"></Step>
|
|
||||||
<Step title="步骤4"></Step>
|
|
||||||
</Steps>
|
|
||||||
<br>
|
|
||||||
<i-button type="primary" @click.native="next">下一步</i-button>
|
|
||||||
<br><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>
|
|
||||||
<Steps direction="vertical" :current="3">
|
|
||||||
<Step title="已完成" content="这里是该步骤的描述信息">
|
|
||||||
<div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>
|
|
||||||
</Step>
|
|
||||||
<Step title="进行中" content="这里是该步骤的描述信息">
|
|
||||||
<div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>
|
|
||||||
</Step>
|
|
||||||
<Step title="待进行" content="这里是该步骤的描述信息">
|
|
||||||
<div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>
|
|
||||||
</Step>
|
|
||||||
<Step title="待进行" content="这里是该步骤的描述信息">
|
|
||||||
<div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>
|
|
||||||
</Step>
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
<Button @click="change">change</Button>
|
||||||
|
<br><br><br><br>
|
||||||
|
<hr>
|
||||||
|
<!--<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>-->
|
||||||
|
<!--<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">-->
|
||||||
|
<!--<Step title="步骤1"></Step>-->
|
||||||
|
<!--<Step title="步骤2"></Step>-->
|
||||||
|
<!--<Step title="步骤3"></Step>-->
|
||||||
|
<!--<Step title="步骤4"></Step>-->
|
||||||
|
<!--</Steps>-->
|
||||||
|
<!--<br>-->
|
||||||
|
<!--<i-button type="primary" @click.native="next">下一步</i-button>-->
|
||||||
|
<!--<br><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>-->
|
||||||
|
<!--<Steps direction="vertical" :current="3">-->
|
||||||
|
<!--<Step title="已完成" content="这里是该步骤的描述信息">-->
|
||||||
|
<!--<div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>-->
|
||||||
|
<!--</Step>-->
|
||||||
|
<!--<Step title="进行中" content="这里是该步骤的描述信息">-->
|
||||||
|
<!--<div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>-->
|
||||||
|
<!--</Step>-->
|
||||||
|
<!--<Step title="待进行" content="这里是该步骤的描述信息">-->
|
||||||
|
<!--<div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>-->
|
||||||
|
<!--</Step>-->
|
||||||
|
<!--<Step title="待进行" content="这里是该步骤的描述信息">-->
|
||||||
|
<!--<div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>-->
|
||||||
|
<!--</Step>-->
|
||||||
|
<!--</Steps>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -84,7 +92,35 @@
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
total: 512,
|
total: 512,
|
||||||
current: 0
|
current: 0,
|
||||||
|
index:0,
|
||||||
|
activitiList:[
|
||||||
|
{
|
||||||
|
approveUserName:'123',
|
||||||
|
startTime:'1'
|
||||||
|
},{
|
||||||
|
approveUserName:'123',
|
||||||
|
startTime:'2'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
changeList:[
|
||||||
|
{
|
||||||
|
approveUserName:'456',
|
||||||
|
startTime:'1'
|
||||||
|
},{
|
||||||
|
approveUserName:'456',
|
||||||
|
startTime:'2'
|
||||||
|
},{
|
||||||
|
approveUserName:'456',
|
||||||
|
startTime:'3'
|
||||||
|
},{
|
||||||
|
approveUserName:'456',
|
||||||
|
startTime:'4'
|
||||||
|
},{
|
||||||
|
approveUserName:'456',
|
||||||
|
startTime:'5'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -97,7 +133,13 @@
|
||||||
} else {
|
} else {
|
||||||
this.current += 1;
|
this.current += 1;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
change () {
|
||||||
|
this.activitiList = this.activitiList.concat(this.changeList);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
// this.change();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import Emitter from '../../mixins/emitter';
|
||||||
import { oneOf } from '../../utils/assist';
|
import { oneOf } from '../../utils/assist';
|
||||||
|
|
||||||
const prefixCls = 'ivu-steps';
|
const prefixCls = 'ivu-steps';
|
||||||
|
|
@ -23,6 +24,7 @@
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Step',
|
name: 'Step',
|
||||||
|
mixins: [ Emitter ],
|
||||||
props: {
|
props: {
|
||||||
status: {
|
status: {
|
||||||
validator (value) {
|
validator (value) {
|
||||||
|
|
@ -49,9 +51,6 @@
|
||||||
currentStatus: ''
|
currentStatus: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created () {
|
|
||||||
this.currentStatus = this.status;
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
wrapClasses () {
|
wrapClasses () {
|
||||||
return [
|
return [
|
||||||
|
|
@ -97,6 +96,15 @@
|
||||||
this.$parent.setNextError();
|
this.$parent.setNextError();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.currentStatus = this.status;
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dispatch('Steps', 'append');
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
this.dispatch('Steps', 'remove');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,21 @@
|
||||||
|
|
||||||
const prefixCls = 'ivu-steps';
|
const prefixCls = 'ivu-steps';
|
||||||
|
|
||||||
|
function debounce(fn) {
|
||||||
|
let waiting;
|
||||||
|
return function() {
|
||||||
|
if (waiting) return;
|
||||||
|
waiting = true;
|
||||||
|
const context = this,
|
||||||
|
args = arguments;
|
||||||
|
const later = function() {
|
||||||
|
waiting = false;
|
||||||
|
fn.apply(context, args);
|
||||||
|
};
|
||||||
|
this.$nextTick(later);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Steps',
|
name: 'Steps',
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -44,11 +59,6 @@
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
|
||||||
this.updateChildProps(true);
|
|
||||||
this.setNextError();
|
|
||||||
this.updateCurrent(true);
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
updateChildProps (isInit) {
|
updateChildProps (isInit) {
|
||||||
const total = this.$children.length;
|
const total = this.$children.length;
|
||||||
|
|
@ -98,8 +108,23 @@
|
||||||
} else {
|
} else {
|
||||||
this.$children[this.current].currentStatus = this.status;
|
this.$children[this.current].currentStatus = this.status;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
debouncedAppendRemove () {
|
||||||
|
return debounce(function () {
|
||||||
|
this.updateSteps();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateSteps () {
|
||||||
|
this.updateChildProps(true);
|
||||||
|
this.setNextError();
|
||||||
|
this.updateCurrent(true);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted () {
|
||||||
|
this.updateSteps();
|
||||||
|
this.$on('append', this.debouncedAppendRemove());
|
||||||
|
this.$on('remove', this.debouncedAppendRemove());
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
current () {
|
current () {
|
||||||
this.updateChildProps();
|
this.updateChildProps();
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue