前端页面串联卡片的一个思路

串联卡片的一个思路

需求描述

做一行固定宽度但是数量不固定的的卡片，卡片前后通过箭头链接，箭头要处在两个卡片中间位置。

问题分析

首先需要一个卡片的基础组件，然后遍历数据循环渲染组件即可，连接图片的箭头可以在每次渲染卡片之后再渲染一个标签 span 做显示指示箭头之用，只要做出判断，当渲染到最后一个卡片时候不在渲染 span 标签即可。

解决问题

• 基础卡片

<template>
  <section class="card-wrap">
    <div class="card">
      <div class="card-flex">
        <div class="title">{{ cData.name }}</div>
        <div class="name">{{ cData.type }}</div>
        <div class="total">总计 <span>{{ cData.unRead + cData.checked }}</span> 条</div>
        <div class="appr">
          <div class="d1">
            <span>已读</span>
            <span>{{ cData.checked }} 条</span>
          </div>
          <div class="d2">
            <span>未读</span>
            <span>{{ cData.unRead }} 条</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "BaseCard",
  props: {
    data: {
      type: Object,
      default: {},
    }
  },
  watch: {
    data: {
      handler(val) {
        this.cData = val
      },
      immediate: true
    },
  },
  data() {
    return {
      cData: {},
    }
  }
}
</script>

<style lang="scss" scoped>
@import './card.scss';

.card-flex {
  width: 138px;
  min-height: 152px;
  text-align: center;
  padding-bottom: 8px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    height: 36px;
    line-height: 48px;
    font-weight: bold;
    color: #444;
  }

  .name {
    color: $color-primary;
  }

  .red {
    color: $color-danger-r6;
  }

  .total {
    color: $color-primary;
    span {
      font-size: 20px;
      font-weight: bolder;
    }
  }

  .appr {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    > div {
      box-sizing: border-box;
      width: 85%;
      height: 20px;
      line-height: 20px;
      border-radius: 10px;
      margin: 2px 0;
      padding: 0 10px;
      background-color: #f7f8fa;
      font-size: 13px;

      display: flex;
      justify-content: space-between;
    }

    .d2 {
      background-color: #f59a23;
      color: white;
    }
  }
}
</style>

• 循环渲染卡片

<div class="flow-box">
    <template v-for="(item, idx) in cData">
        <base-card
            :key="item.name + idx"
            :data="item"
            @click.native="handleCard"
        ></base-card>
        <span
            v-if="idx != cData.length - 1"
            :key="'s' + item.name"
        ></span>
    </template>
</div>

• flex布局写样式

  .flow-box {
    display: flex;
    justify-content: space-between;
    min-height: 200px;

    .card-wrap {
      flex: 0 1 auto;
    }

    > span {
      flex: 1;
      position: relative;

      &::after {
        font-family: element-icons !important;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        display: inline-block;
        -webkit-font-smoothing: antialiased;

        content: "\e6dc";
        display: block;
        height: 30px;
        width: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        color: $color-neutral-n8;
      }
    }
  }

• 效果描述

通过flex布局是的所有卡片水品占满整个屏幕，每个卡片中间放一个连接的箭头图标且图标居中，让卡片和图标元素都是处在一个flex布局中就可以适配整个屏幕宽度了。