Vue Amazing UI

Appearance

步骤条 Steps ​

引导用户按照流程完成任务的导航条

何时使用 ​

  • 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务

基本使用 ​

Step 1
description 1
2
Step 2
description 2
3
Step 3
description 3
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const steps = ref([
  {
    title: 'Step 1',
    description: 'description 1'
  },
  {
    title: 'Step 2',
    description: 'description 2'
  },
  {
    title: 'Step 3',
    description: 'description 3'
  }
])
const current = ref(2)
watchEffect(() => {
  console.log('current', current.value)
})
function onChange(index: number) {
  // 父组件获取切换后的选中步骤
  console.log('change', index)
}
</script>
<template>
  <Steps :steps="steps" :current="current" @change="onChange" />
</template>

标签放置位置 ​

right
bottom
Step 1
description 1
2
Step 2
description 2
3
Step 3
description 3
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const steps = ref([
  {
    title: 'Step 1',
    description: 'description 1'
  },
  {
    title: 'Step 2',
    description: 'description 2'
  },
  {
    title: 'Step 3',
    description: 'description 3'
  }
])
const placeOptions = [
        {
          label: 'right',
          value: 'right'
        },
        {
          label: 'bottom',
          value: 'bottom'
        }
      ]
const place = ref('bottom')
const current = ref(2)
watchEffect(() => {
  console.log('current', current.value)
})
</script>
<template>
  <Flex vertical>
    <Radio :options="placeOptions" v-model:value="place" button button-style="solid" />
    <Steps :steps="steps" :label-placement="place" :current="current" />
  </Flex>
</template>

迷你版 ​

default
small
Step 1
2
Step 2
3
Step 3
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const minSteps = ref([
  {
    title: 'Step 1'
  },
  {
    title: 'Step 2'
  },
  {
    title: 'Step 3'
  }
])
const sizeOptions = [
        {
          label: 'default',
          value: 'default'
        },
        {
          label: 'small',
          value: 'small'
        }
      ]
const size = ref('small')
const current = ref(2)
watchEffect(() => {
  console.log('current', current.value)
})
</script>
<template>
  <Flex vertical>
    <Radio :options="sizeOptions" v-model:value="size" button button-style="solid" />
    <Steps :steps="minSteps" :size="size" :current="current" />
  </Flex>
</template>

垂直步骤条 ​

Step 1
description 1
2
Step 2
description 2
3
Step 3
description 3
Step 1
description 1
2
Step 2
description 2
3
Step 3
description 3
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const steps = ref([
  {
    title: 'Step 1',
    description: 'description 1'
  },
  {
    title: 'Step 2',
    description: 'description 2'
  },
  {
    title: 'Step 3',
    description: 'description 3'
  }
])
const current = ref(2)
watchEffect(() => {
  console.log('current', current.value)
})
</script>
<template>
  <Space :gap="120">
    <Steps :steps="steps" vertical :current="current" />
    <Steps :steps="steps" vertical size="small" :current="current" />
  </Space>
</template>

点状步骤条 ​

Step 1
description 1
Step 2
description 2
Step 3
description 3
Step 1
description 1
Step 2
description 2
Step 3
description 3
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const steps = ref([
  {
    title: 'Step 1',
    description: 'description 1'
  },
  {
    title: 'Step 2',
    description: 'description 2'
  },
  {
    title: 'Step 3',
    description: 'description 3'
  }
])
const current = ref(2)
watchEffect(() => {
  console.log('current', current.value)
})
</script>
<template>
  <Space vertical>
    <Steps :steps="steps" dotted v-model:current="current" />
    <Steps :steps="steps" vertical dotted v-model:current="current" />
  </Space>
</template>

可点击 ​

设置 v-model:current 后即可点击


Prev
Next


Step 1
description 1
2
Step 2
description 2
3
Step 3
description 3

Step 1
description 1
2
Step 2
description 2
3
Step 3
description 3
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const steps = ref([
  {
    title: 'Step 1',
    description: 'description 1'
  },
  {
    title: 'Step 2',
    description: 'description 2'
  },
  {
    title: 'Step 3',
    description: 'description 3'
  }
])
const current = ref(2)
watchEffect(() => {
  console.log('current', current.value)
})
function onPrev () {
  if (current.value > 1) {
    current.value--
  }
}
function onNext () {
  if (steps.value.length >= current.value) {
    current.value++
  }
}
</script>
<template>
  <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" />
</template>

步骤条配置器 ​

Step 1
description 1
2
Step 2
description 2
3
Step 3
description 3
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const steps = ref([
  {
    title: 'Step 1',
    description: 'description 1'
  },
  {
    title: 'Step 2',
    description: 'description 2'
  },
  {
    title: 'Step 3',
    description: 'description 3'
  }
])
const current = ref(2)
watchEffect(() => {
  console.log('current', current.value)
})
const sizeOptions = [
  {
    label: 'default',
    value: 'default'
  },
  {
    label: 'small',
    value: 'small'
  }
]
const placeOptions = [
  {
    label: 'right',
    value: 'right'
  },
  {
    label: 'bottom',
    value: 'bottom'
  }
]
const state = reactive({
  size: 'default',
  vertical: false,
  labelPlacement: 'right',
  dotted: false,
  current: 3
})
</script>
<template>
  <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"
  />
</template>
<style lang="less" scoped>
.mt30 {
  margin-top: 30px;
}
</style>

APIs ​

Steps ​

参数说明类型默认值
steps步骤数组Step[][]
width步骤条总宽度，单位 pxnumber | string'auto'
size步骤条大小'default' | 'small''default'
vertical是否使用垂直步骤条，当 vertical: true 时，labelPlacement 自动设为 rightbooleanfalse
labelPlacement标签放置位置，默认放图标右侧，可选 bottom 放图标下方'right' | 'bottom''right'
dotted是否使用点状步骤条，当 dotted: true 且 vertical: false 时，labelPlacement 将自动设为 bottombooleanfalse
current
v-model
当前选中的步骤，设置 v-model 后，Steps 变为可点击状态。从 1 开始计数number1

Step Type ​

名称说明类型默认值
title?标题stringundefined
description?描述stringundefined

Events ​

名称说明类型
change点击切换步骤时触发(index: number) => void

Released under the MIT License.

Copyright © 2023-present the Muse Catcher