前言
最近在弄移动端,然后需求里要展示一个流程图,现有的组件库里的组件都不符合要求所以只能手写实现,记录一下方便日后考古
要求:
1.展示标题,名称以及时间戳
2.根据流程节点区别颜色
3.根据屏幕大小,内容过长时展示省略号,点击内容即换行展示全部内容(如下图)
效果图
代码
<template>
<div id="approvalProcess" class="approvalProcess">
<div class="vertical">
<div class="item-wrapper">
<div
v-for="(item, index) of flowLine"
:key="index"
class="item"
:class="[{ current: item.point == 2 || item.point == 3 }]"
@tap="switchTap(index)"
>
<div class="left">
<div
class="arc"
:class="[
{
orange_point: item.point == 2,
yred_point: item.point == 3,
green_point: item.point == 1,
ygray_point: item.point == 0
}
]" //根据point区分节点颜色
></div>
<div v-if="index < flowLine.length - 1" class="line"></div>
</div>
<div class="right">
<div class="title" style="display: flex">
<div
style="width:25%; font-weight: 500;white-space: nowrap;text-overflow: ellipsis;overflow:hidden; "
@click="showDetail($event)"
>
{{ item.title }}
</div>
<div
style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden; "
:style="{ width: item.timeStr ? '29%' : '75%' }"
@click="showDetail($event)"
>
{{ item.name }}
</div>
<div
v-show="item.timeStr"
class="desc"
style="width:46%;white-space: nowrap;text-overflow: ellipsis;overflow:hidden; "
@click="showDetail($event)"
>
{{ item.timeStr }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isc: true,
flowLine: [
{
title: '标题1',
name: '名称1',
timeStr: '2012-04-08 13:14:00',
point: 0
},
{
title: '标题2',
name: '名称2',
timeStr: '2014-04-12 13:14:00',
point: 1
},
{
title: '标题3',
name: '名称3',
timeStr: '2020-04-20 13:14:00',
point: 2
},
{
title: '标题4',
name: '名称4',
timeStr: '2022-04-12 13:14:00',
point: 3
}
]
};
},
methods: {
/**
*数据过长隐藏时点击展示全部
*/
showDetail(e) {
this.isc = !this.isc;
e.target.style.whiteSpace = this.isc ?'nowrap' : 'normal';
}
}
};
</script>
<style lang="scss" scoped>
.approvalProcess {
margin-top: 0.25rem;
.vertical {
background: #fff;
width: 100%;
overflow: hidden;
.item-wrapper {
.item {
color: #333;
display: flex;
min-height: 1rem;
&:last-child {
min-height: 0.5rem;
}
.left {
position: relative;
height: auto;
display: flex;
padding-top: 0.1rem;
}
.right {
width: 96%;
.title {
font-size: 0.28rem;
margin-left: 0.2rem;
line-height: 0.4rem;
}
.desc {
font-size: 0.28rem;
}
}
.arc {
width: 0.22rem;
height: 0.22rem;
border-radius: 50%;
display: inline-block;
font-size: 0.28rem;
color: #a9a9a9;
line-height: 0.22rem;
text-align: center;
}
&.current {
.line {
}
}
.line {
padding: 0.2rem 0;
width: 0.05rem;
position: absolute;
height: calc(100% - 0.2rem);
box-sizing: border-box;
border-left: 1px dashed #979797;
margin-top: 0.2rem;
left: 0.1rem;
}
div {
&.active {
color: #fff;
}
}
}
}
}
}
</style>