Vue3步骤条（Steps）

可自定义设置以下属性：

• 步骤数组（steps），类型：Array<{title?: string, description?: string}>，默认 []

• 步骤条总宽度（width），类型：number | string，单位 px，默认 'auto'

• 步骤条大小（size），类型：'default' | 'small'，默认 'default'

• 是否使用垂直步骤条（vertical），当 vertical: true 时，labelPlacement 自动设为 right，类型：boolean，默认 false

• 标签放置位置（labelPlacement），默认放图标右侧，可选 bottom 放图标下方，类型：'right' | 'bottom'，默认 'right'

• 是否使用点状步骤条（dotted），当 dotted: true 且 vertical: false 时，labelPlacement 将自动设为 bottom，类型：boolean，默认 false

• 当前选中的步骤，设置 v-model 后，Steps 变为可点击状态（v-model:current），类型：number，默认 1，从 1 开始计数

效果如下图：在线预览

①创建步骤条组件Steps.vue：

<script setup lang="ts">
import { computed } from 'vue'
interface Step {
  title?: string // 标题
  description?: string // 描述
}
interface Props {
  steps?: Step[] // 步骤数组
  width?: number | string // 步骤条总宽度，单位 px
  size?: 'default' | 'small' // 步骤条大小
  vertical?: boolean // 是否使用垂直步骤条，当 vertical: true 时，labelPlacement 自动设为 right
  labelPlacement?: 'right' | 'bottom' // 标签放置位置，默认放图标右侧，可选 bottom 放图标下方
  dotted?: boolean // 是否使用点状步骤条，当 dotted: true 且 vertical: false 时，labelPlacement 将自动设为 bottom
  current?: number // (v-model) 当前选中的步骤，设置 v-model 后，Steps 变为可点击状态。从 1 开始计数
}
const props = withDefaults(defineProps<Props>(), {
  steps: () => [],
  width: 'auto',
  size: 'default',
  vertical: false,
  labelPlacement: 'right',
  dotted: false,
  current: 1
})
const totalWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  } else {
    return props.width
  }
})
const totalSteps = computed(() => {
  // 步骤总数
  return props.steps.length
})
const currentStep = computed(() => {
  if (props.current < 1) {
    return 1
  } else if (props.current > totalSteps.value + 1) {
    return totalSteps.value + 1
  } else {
    return props.current
  }
})
// 若当前选中步骤超过总步骤数，则默认选择步骤1
const emits = defineEmits(['update:current', 'change'])
function onChange(index: number) {
  // 点击切换选择步骤
  if (currentStep.value !== index) {
    emits('update:current', index)
    emits('change', index)
  }
}
</script>
<template>
  <div
    class="m-steps"
    :class="{
      'steps-small': size === 'small',
      'steps-vertical': vertical,
      'steps-label-bottom': !vertical && (labelPlacement === 'bottom' || dotted),
      'steps-dotted': dotted
    }"
    :style="`width: ${totalWidth};`"
  >
    <div
      class="m-steps-item"
      :class="{
        'steps-finish': currentStep > index + 1,
        'steps-process': currentStep === index + 1,
        'steps-wait': currentStep < index + 1
      }"
      v-for="(step, index) in steps"
      :key="index"
    >
      <div tabindex="0" class="steps-info-wrap" @click="onChange(index + 1)">
        <div class="steps-tail"></div>
        <div class="steps-icon">
          <template v-if="!dotted">
            <span v-if="currentStep <= index + 1" class="steps-num">{
  { index + 1 }}</span>
            <svg v-else class="icon-svg" viewBox="64 64 896 896" data-icon="check" aria-hidden="true" focusable="false">
              <path
                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
              ></path>
            </svg>
          </template>
          <template v-else>
            <span class="steps-dot"></span>
          </template>
        </div>
        <div class="m-steps-content">
          <div class="steps-title">{
  { step.title }}</div>
          <div v-if="step.description" class="steps-description">{
  { step.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.m-steps {
  display: flex;
  gap: 16px;
  transition: all 0.3s;
  &:not(.steps-label-bottom) {
    .m-steps-item .steps-info-wrap {
      .steps-tail {
        display: none;
      }
    }
  }
  .m-steps-item {
    position: relative;
    overflow: hidden;
    flex: 1; // 弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
    vertical-align: top;
    &:last-child {
      flex: none;
      .steps-info-wrap {
        .m-steps-content .steps-title {
          padding-right: 0;
          &::after {
            display: none;
          }
        }
        .steps-tail {
          display: none;
        }
      }
    }
    .steps-info-wrap {
      display: inline-block;
      vertical-align: top;
      outline: none;
      .steps-tail {
        height: 9px;
        position: absolute;
        top: 12px;
        inset-inline-start: 0;
        width: 100%;
        transition: all 0.3s;
        &::after {
          display: inline-block;
          vertical-align: top;
          width: 100%;
          height: 1px;
          background-color: rgba(5, 5, 5, 0.06);
          border-radius: 1px;
          transition: background-color 0.3s;
          content: '';
        }
      }
      .steps-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.06);
        border: 1px solid transparent;
        transition: all 0.3s;
        .steps-num {
          display: inline-block;
          font-size: 16px;
          line-height: 1;
          color: rgba(0, 0, 0, 0.65);
          transition: all 0.3s;
        }
        .icon-svg {
          display: inline-block;
          fill: @themeColor;
          width: 16px;
          height: 16px;
          transition: all 0.3s;
        }
        .steps-dot {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          transition: all 0.3s;
        }
      }
      .m-steps-content {
        display: inline-block;
        vertical-align: top;
        transition: all 0.3s;
        .steps-title {
          position: relative;
          display: inline-block;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          line-height: 32px;
          transition: all 0.3s;
          padding-right: 16px;
          &::after {
            background: #e8e8e8;
            position: absolute;
            top: 16px;
            left: 100%;
            display: block;
            width: 3000px;
            height: 1px;
            content: '';
            cursor: auto;
            transition: all 0.3s;
          }
        }
        .steps-description {
          max-width: 140px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
          line-height: 22px;
          word-break: break-all;
          transition: all 0.3s;
        }
      }
    }
  }
  .steps-finish {
    .steps-info-wrap {
      cursor: pointer;
      .steps-tail {
        &::after {
          background-color: @themeColor;
        }
      }
      .steps-icon {
        background-color: #e6f4ff;
        border-color: #e6f4ff;
        .steps-dot {
          background: @themeColor;
        }
      }
      .m-steps-content {
        .steps-title {
          color: rgba(0, 0, 0, 0.88);
          &::after {
            background-color: @themeColor;
          }
        }
        .steps-description {
          color: rgba(0, 0, 0, 0.45);
        }
      }
      &:hover {
        .steps-icon {
          border-color: @themeColor;
        }
        .m-steps-content {
          .steps-title {
            color: @themeColor;
          }
          .steps-description {
            color: @themeColor;
          }
        }
      }
    }
  }
  .steps-process {
    .steps-info-wrap {
      .steps-icon {
        background-color: @themeColor;
        border: 1px solid rgba(0, 0, 0, 0.25);
        border-color: @themeColor;
        .steps-num {
          color: #fff;
        }
        .steps-dot {
          background: @themeColor;
        }
      }
      .m-steps-content {
        .steps-title {
          color: rgba(0, 0, 0, 0.88);
        }
        .steps-description {
          color: rgba(0, 0, 0, 0.88);
        }
      }
    }
  }
  .steps-wait {
    .steps-info-wrap {
      cursor: pointer;
      &:hover {
        .steps-icon {
          border-color: @themeColor;
          .steps-num {
            color: @themeColor;
          }
        }
        .m-steps-content {
          .steps-title {
            color: @themeColor;
          }
          .steps-description {
            color: @themeColor;
          }
        }
      }
      .steps-icon {
        .steps-dot {
          background: rgba(0, 0, 0, 0.25);
        }
      }
    }
  }
}
.steps-small {
  gap: 12px;
  .m-steps-item {
    .steps-info-wrap {
      .steps-icon {
        width: 24px;
        height: 24px;
        .steps-num {
          font-size: 12px;
        }
        .icon-svg {
          width: 12px;
          height: 12px;
        }
      }
      .m-steps-content {
        .steps-title {
          font-size: 14px;
          line-height: 24px;
          padding-right: 12px;
          &::after {
            top: 12px;
          }
        }
      }
    }
  }
}
.steps-label-bottom {
  gap: 0;
  .m-steps-item {
    overflow: visible;
    .steps-info-wrap {
      .steps-tail {
        margin-inline-start: 56px;
        padding: 4px 24px;
      }
      .steps-icon {
        margin-inline-start: 40px;
      }
      .m-steps-content {
        display: block;
        width: 112px;
        margin-top: 12px;
        text-align: center;
        .steps-title {
          padding-right: 0;
          &::after {
            display: none;
          }
        }
      }
    }
  }
}
.steps-dotted {
  .m-steps-item {
    overflow: visible;
    .steps-info-wrap {
      .steps-tail {
        height: 3px;
        top: 2.5px;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        margin-inline: 70px 0;
        padding: 0;
        &::after {
          width: calc(100% - 24px);
          height: 3px;
          margin-inline-start: 12px;
        }
      }
      .steps-icon {
        position: absolute;
        width: 8px;
        height: 8px;
        margin-inline-start: 66px;
        padding-inline-end: 0;
        line-height: 8px;
        background: transparent;
        border: 0;
        vertical-align: top;
      }
      .m-steps-content {
        width: 140px;
        margin-top: 20px;
        .steps-title {
          line-height: 1.5714285714285714;
        }
      }
    }
  }
  .steps-process {
    .steps-info-wrap .steps-icon {
      top: -1px;
      width: 10px;
      height: 10px;
      line-height: 10px;
      margin-inline-start: 65px;
    }
  }
}
.steps-vertical {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  .m-steps-item {
    flex: 1 0 auto;
    overflow: visible;
    &:last-child {
      flex: 1 0 auto;
    }
    &:not(:last-child) {
      .steps-info-wrap {
        .steps-tail {
          display: block;
        }
        .m-steps-content {
          .steps-title {
            &::after {
              display: none;
            }
          }
        }
      }
    }
    .steps-info-wrap {
      .steps-tail {
        top: 0;
        inset-inline-start: 15px;
        width: 1px;
        height: 100%;
        padding: 38px 0 6px;
        &::after {
          width: 1px;
          height: 100%;
        }
      }
      .steps-icon {
        float: left;
        margin-right: 16px;
      }
      .m-steps-content {
        display: block;
        min-height: 48px;
        overflow: hidden;
        .steps-title {
          line-height: 32px;
        }
        .steps-description {
          padding-bottom: 12px;
        }
      }
    }
  }
}
.steps-small.steps-vertical {
  .m-steps-item {
    .steps-info-wrap {
      .steps-tail {
        inset-inline-start: 11px;
        padding: 30px 0 6px;
      }
      .m-steps-content {
        .steps-title {
          line-height: 24px;
        }
      }
    }
  }
}
.steps-vertical.steps-dotted {
  .m-steps-item {
    .steps-info-wrap {
      .steps-tail {
        top: 12px;
        inset-inline-start: 0;
        margin: 0;
        padding: 16px 0 8px;
        &::after {
          margin-inline-start: 3.5px;
        }
      }
      .steps-icon {
        position: static;
        margin-top: 12px;
        margin-inline-start: 0;
        background: none;
      }
      .m-steps-content {
        width: inherit;
        margin: 0;
      }
    }
  }
  .steps-process {
    .steps-info-wrap {
      .steps-icon {
        position: relative;
        margin-top: 11px;
        top: 0;
        inset-inline-start: -1px;
      }
    }
  }
}
.steps-small.steps-vertical.steps-dotted {
  .m-steps-item {
    .steps-info-wrap {
      .steps-tail {
        top: 8px;
      }
      .steps-icon {
        margin-top: 8px;
      }
    }
  }
  .steps-process {
    .steps-info-wrap {
      .steps-icon {
        margin-top: 7px;
      }
    }
  }
}
</style>

②在要使用的页面引入：

<script setup lang="ts">
import Steps from './Steps.vue'
import { ref, watchEffect, reactive } from 'vue'
const steps = ref([
  {
    title: 'Step 1',
    description: 'description 1'
  },
  {
    title: 'Step 2',
    description: 'description 2'
  },
  {
    title: 'Step 3',
    description: 'description 3'
  },
  {
    title: 'Step 4',
    description: 'description 4'
  },
  {
    title: 'Step 5',
    description: 'description 5'
  }
])
const minSteps = ref([
  {
    title: 'Step 1'
  },
  {
    title: 'Step 2'
  },
  {
    title: 'Step 3'
  },
  {
    title: 'Step 4'
  },
  {
    title: 'Step 5'
  }
])
const current = ref(3)
watchEffect(() => {
  console.log('current:', current.value)
})
const sizeOptions = [
  {
    label: 'default',
    value: 'default'
  },
  {
    label: 'small',
    value: 'small'
  }
]
const size = ref('small')
const placeOptions = [
  {
    label: 'right',
    value: 'right'
  },
  {
    label: 'bottom',
    value: 'bottom'
  }
]
const place = ref('bottom')
function onChange(index: number) {
  // 父组件获取切换后的选中步骤
  console.log('change:', index)
}
function onPrev() {
  if (current.value > 1) {
    current.value--
  }
}
function onNext() {
  if (steps.value.length >= current.value) {
    current.value++
  }
}
const state = reactive({
  size: 'default',
  vertical: false,
  labelPlacement: 'right',
  dotted: false,
  current: 3
})
</script>
<template>
  <div>
    <h1>{
  { $route.name }} {
  { $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Steps :steps="steps" :current="current" @change="onChange" />
    <h2 class="mt30 mb10">标签放置位置</h2>
    <Flex vertical>
      <Radio :options="placeOptions" v-model:value="place" button button-style="solid" />
      <Steps :steps="steps" :label-placement="place" :current="current" />
    </Flex>
    <h2 class="mt30 mb10">迷你版</h2>
    <Flex vertical>
      <Radio :options="sizeOptions" v-model:value="size" button button-style="solid" />
      <Steps :steps="minSteps" :size="size" :current="current" />
    </Flex>
    <h2 class="mt30 mb10">垂直步骤条</h2>
    <Space :gap="120">
      <Steps :steps="steps" vertical :current="current" />
      <Steps :steps="steps" vertical size="small" :current="current" />
    </Space>
    <h2 class="mt30 mb10">点状步骤条</h2>
    <Space vertical>
      <Steps :steps="steps" dotted v-model:current="current" />
      <Steps :steps="steps" vertical dotted v-model:current="current" />
    </Space>
    <h2 class="mt30 mb10">可点击</h2>
    <h3 class="mb10">设置 v-model:current 后即可点击</h3>
    <Space>
      <Button @click="onPrev">Prev</Button>
      <Button @click="onNext">Next</Button>
    </Space>
    <br />
    <br />
    <Steps :steps="steps" v-model:current="current" />
    <br />
    <Steps :steps="steps" vertical v-model:current="current" />
    <h2 class="mt30 mb10">步骤条配置器</h2>
    <Row :gutter="24">
      <Col :span="6">
        <Space gap="small" vertical>
          size:
          <Radio :options="sizeOptions" v-model:value="state.size" button button-style="solid" />
        </Space>
      </Col>
      <Col :span="6">
        <Space gap="small" vertical>
          vertical:
          <Switch v-model="state.vertical" />
        </Space>
      </Col>
      <Col :span="6">
        <Space gap="small" vertical>
          labelPlacement:
          <Radio :options="placeOptions" v-model:value="state.labelPlacement" button button-style="solid" />
        </Space>
      </Col>
      <Col :span="6">
        <Space gap="small" vertical>
          dotted:
          <Switch v-model="state.dotted" />
        </Space>
      </Col>
    </Row>
    <Steps
      class="mt30"
      :steps="steps"
      :size="state.size"
      :vertical="state.vertical"
      :label-placement="state.labelPlacement"
      :dotted="state.dotted"
      v-model:current="current"
    />
  </div>
</template>