VUE自定步骤条

我们在开发的工程当中呢总会遇到组件库无法满足需求的问题，所以以下就是我在开放过程当中所遇到的问题，组件库的步骤条比较丑，为了UI给出的实际图，自己来开发了一个，废话不多说上代码

html代码部分

<template>
  <div class="steps">
    <template v-for="(item, index) in props.items" :key="item.key">
      <div :style="{ width: otherWidth, position: 'relative', left: -(size * index) + 'px' }" v-if="!index" class="item">
        <div class="item-flex start" :class="props.current >= index ? 'current' : ''">
          <span class="border" :class="props.current >= index ? 'Select' : ''">{{ index + 1 }}</span>
          <span class="font">{{ item.title }}</span>
        </div>
      </div>
      <div :style="{ width: otherWidth, position: 'absolute', left: lastLeft, top: 0 }" v-else-if="index === props.items.length - 1" class="item">
        <div class="item-flex end" :class="props.current >= index ? 'current' : ''">
          <span class="border" :class="props.current >= index ? 'Select' : ''">{{ index + 1 }}</span>
          <span class="font">{{ item.title }}</span>
        </div>
      </div>
      <div :style="{ width: otherWidth, position: 'relative', left: -(size * index) + 'px' }" v-else class="item">
        <div class="item-flex center" :class="props.current >= index ? 'current' : ''">
          <span class="border" :class="props.current >= index ? 'Select' : ''">{{ index + 1 }}</span>
          <span class="font">{{ item.title }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

JavaScript代码部分

因为是按照组件可的步骤条来开发的，所以我们也会需要在调用组件的时候来传递参数分别是items和current，items是他的步骤名称，current则是他的步骤索引，

<script setup lang="ts">
  import { defineProps, computed } from 'vue';

  const props = defineProps({
    items: [] as any,
    current: Number,
  });

  // 每个平移 15px
  const size = 15;

  const otherWidth = computed(() => {
    const length = props.items.length;
    const total = size * (length - 1);
    return `calc(${Number((1 / length).toFixed(4)) * 100}% + ${total / length}px)`;
  });
  const lastLeft = computed(() => {
    const length = props.items.length;
    const total = size * (length - 1);
    return `calc(${Number((1 - 1 / length).toFixed(4)) * 100}% - ${total / length}px)`;
  });
</script>

css代码部分

最后呢则是此组件的样式部分

<style scoped lang="less">
  .steps {
    //display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
    .item {
      display: inline-block;
      width: v-bind(otherWidth);

      //font-weight: 600;

      //align-content: center;

      .item-flex {
        height: 40px;
        text-align: left;
        line-height: 40px;
        background-color: #fff;
        color: #4e5969;
        font-size: 14px;
        align-items: center;
        justify-content: flex-start;
        padding-left: 25px;
        display: flex;
        .font {
          letter-spacing: 2px;
          margin-left: 8px;
          min-width: 70px;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .border {
          display: block;
          min-width: 20px;
          min-height: 20px;
          text-align: center;
          line-height: 16px;
          border-radius: 100%;
          border: 2px solid #4e5969;
          color: #4e5969;
        }

        .Select {
          display: block;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 16px;
          border-radius: 100%;
          border: 2px solid #fff;
          background-color: #fff;
          color: #1677ff;
        }

        &.start {
          clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% 50%, calc(100% - 20px) 0);
        }

        &.center {
          clip-path: polygon(0 0, 20px 50%, 0 100%, calc(100% - 20px) 100%, 100% 50%, calc(100% - 20px) 0);
        }

        &.end {
          clip-path: polygon(0 0, 20px 50%, 0 100%, 100% 100%, 100% 50%, 100% 0);
        }

        &.current {
          background-color: #1677ff;
          color: #ffffff;
        }

        &.blue {
          background-color: #e4f2fe;
          color: #1677ff;
        }
      }
    }
  }
</style>

此代码可以直接复制来使用，原创不易，如需要代码的话请点赞收藏哦，