因为业务需要没有进行更深度封装，就写了最基础的组件，局限性较大，同时也可以容易改动
父组件引入（可以进行二次封装）
<step-bar textTitle="进度1" textDes="2022-11-11 12:12:12 完成" :last-step="false"></step-bar>
<step-bar textTitle="进度2" textDes="2022-11-11 12:12:12 完成" :last-step="false"></step-bar>
<step-bar textTitle="进度3" textDes="2022-11-11 12:12:12 完成" :last-step="true"></step-bar>
组件内容
<!-- 步骤条-->
<template>
<view class="step-line-one">
<view class="step-bar">
<view class="step-bar-dot"></view>
<view class="step-bar-line" v-if="!lastStep"></view>
</view>
<view class="step-content">
<view class="step-content-title">{{ textTitle }}</view>
<view class="step-content-content">{{ textContent }}</view>
</view>
</view>
</template>
<script>
export default {
name: "stepBar",
props: {
textTitle: {
type: String,
default: '标题标题'
},
textContent: {
type: String,
default: '2022-02-22 12:00:00 完成'
},
lastStep: {
type: Boolean,
}
}
}
</script>
<style scoped lang="scss">
.step-content {
margin-left: 24px;
&-title {
font-weight: 700;
}
&-content {
margin: 10px 0;
color: #b0b0b0;
}
}
.step-bar {
position: relative;
}
.step-bar-dot {
width: 14px;
height: 15px;
border-radius: 50%;
background-color: #1777ff;
position: absolute;
left: 0;
top: 3px;
}
.step-bar-line {
width: 3px;
height: 60px;
background-color: #1777ff;
position: absolute;
left: 6px;
top: 7px;
}
</style>
|
