组件库 | 步骤条

在写移动端步骤条的时候，发现第三方的步骤条满足不了需求，于是手写了一个。代码如下：（字数不够来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑来凑）“

<!-- 步骤条组件 -->
<template>
<div
     id="steps"
     :style="`display:flex;flex-direction:${stepStyle.flexDirection};`"
     >
  <div
       v-for="(item, index) in stepList"
       :key="index"
       class="steps"
       :style="`display:flex;flex-direction:${stepStyle.stepsFlexDirection};`"
       >
    <p
       class="icon"
       :style="`background-color: ${
               active >= index ? stepStyle.stepsActiveColor : '#CCCCCC'
               };`"
       >
      {
  
  { index + 1 }}
  </p>
    <p
       class="name"
       :style="`color:${
               active >= index ? stepStyle.stepsActiveColor : '#CCCCCC'
               }`"
       >
      {
  
  { item }}
  </p>
  </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs } from "vue";
  export default defineComponent({
    name: "steps",
    components: {},
    props: {
      stepStyle: {
        type: Object,
        default() {
          return {
            flexDirection: "row",
            stepsFlexDirection: "column",
            stepsActiveColor: "#0077dd",
          };
        },
      },
      stepList: {
        type: Array,
        default() {
          return [];
        },
      },
      active: {
        type: Number,
        default: 0,
      },
    },
    setup(props) {
      console.log("props", props.stepStyle);
      const data = reactive({});
      return {
        ...toRefs(data),
      };
    },
  });
</script>

<style lang="scss" scoped>
  #steps {
    .steps {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 70px;
      .icon {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .name {
        width: 56px;
        height: 20px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 14px;
        text-align: center;
        padding-top: 4px;
      }
    }

    .steps:not(:last-child)::after {
      content: "";
      width: calc(100% - 35px);
      height: 1px;
      border-bottom: 2px solid #cccccc;
      display: inline-block;
      margin-left: 100%;
      margin-top: -40px;
    }
    .steps:last-child::after {
      content: "";
      display: inline-block;
      margin-left: 100%;
      margin-top: -40px;
    }
  }
</style>

        

          
        
        
        

          

          AI 代码解读