Steps 步骤条

步骤条

1

提交订单

2025-03-30

2

付款成功

2025-03-30

3

商品发货

2025-03-30

4

确认收货

2025-03-30

5

订单完成

2025-03-30

1

提交订单

2025-03-30

2

付款成功

2025-03-30

3

商品发货

2025-03-30

4

确认收货

2025-03-30

5

订单完成

2025-03-30

步骤条

这是 Steps 的基础例子

<script setup lang="ts">
import { reactive } from 'vue'

const order = reactive({
  orderState: 2,
  createTime: '2025-03-30',
  payTime: '2025-03-30',
  consignTime: '2025-03-30',
  evaluationTime: '2025-03-30',
  endTime: '2025-03-30',
})

function nextClick() {
  order.orderState += 1
}

function resetClick() {
  order.orderState = 2
}
</script>

<template>
  <div class="steps-demo">
    <NpSteps :active="order.orderState">
      <NpStepsItem title="提交订单" :desc="order.createTime" />
      <NpStepsItem title="付款成功" :desc="order.payTime" />
      <NpStepsItem title="商品发货" :desc="order.consignTime" />
      <NpStepsItem title="确认收货" :desc="order.evaluationTime" />
      <NpStepsItem title="订单完成" :desc="order.endTime" />
    </NpSteps>

    <NpSteps green :active="order.orderState">
      <NpStepsItem title="提交订单" :desc="order.createTime" />
      <NpStepsItem title="付款成功" :desc="order.payTime" />
      <NpStepsItem title="商品发货" :desc="order.consignTime" />
      <NpStepsItem title="确认收货" :desc="order.evaluationTime" />
      <NpStepsItem title="订单完成" :desc="order.endTime" />
    </NpSteps>

    <div>
      <NpButton @click="nextClick">
        下一步
      </NpButton>
      <NpButton plain type="green" @click="resetClick">
        付款成功
      </NpButton>
    </div>
  </div>
</template>

<style scoped>
.steps-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>