vue如何实现自定义步骤条
作者：dearqz
这篇文章主要介绍了vue如何实现自定义步骤条问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue自定义步骤条
首先看一下实现的效果：
来看看实现过程：
公共插件
<!-- Step.vue -->
<template>
<div class="stepOut">
<ul>
<li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index">
<!-- 模拟步骤条的节点，此处为圆圈 -->
<div :class="stepInfo.step >= index+1 ? 'icon active':'icon'"></div>
<!-- 模拟步骤条连接线，动态显示 -->
<div :class="stepInfo.step >= index+2 ? 'line lineActive':'line'" v-show="index!==stepInfo.list.length-1"></div>
<!-- 步骤名称 -->
<p class="stepStatus">{{stepItem.status}}</p>
<!-- 步骤时间 -->
<p class="statusTime">{{stepItem.statusTime}}</p>
</li>
</ul>
</div>
</template><script>
export default {
name: 'steps',
props: {
// 传递步骤参数
stepInfo: {
type: Object,
default: function () {
return {
list: [],
step: 0
}
}
}
}
}
</script><style lang="less" scoped>
.stepOut {
width: 100%;
height: 70px;
display: flex;
justify-content: center;
.stepItem {
width: 260px;
height: 70px;
float: left;
font-family: SimSun;
font-size: 16px;
text-align: center;
position: relative;
.icon {
width: 13px;
height: 13px;
border-radius: 50%;
background: rgba(226, 226, 226, 1);
margin: 0 auto;
position: relative;
z-index: 888;
}
.active {
background-color: green;
}
.line {
position: absolute;
top: 6px;
left: 50%;
border-bottom: 1px dashed rgba(3, 2, 2, 0.7);
width: 260px;
z-index: 111;
}
.lineActive {
border-bottom: 1px solid green;
}
.stepStatus {
color: rgba(87, 87, 87, 1);
line-height: 36px;
}
.statusTime {
color: rgba(87, 87, 87, 1);
opacity: 0.5;
}
}
}
</style>使用
<template>
<div class="main">
<Steps :stepInfo="stepInfo"></Steps>
</div>
</template><script>
import Steps from '@/components/Steps'
export default {
components: { Steps },
data () {
return {
stepInfo: {
list: [{ status: '提现申请提交成功，令额冻结', statusTime: '2019-11-8 12:12:12' },...],
step: 2
}
}
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。