手写实现flow流程图(移动端自适应)

前言

最近在弄移动端，然后需求里要展示一个流程图，现有的组件库里的组件都不符合要求所以只能手写实现，记录一下方便日后考古

要求：
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>