Viog UI

步骤条 steps new 待优化

用于提示操作流程

使用说明

通过modelValue控制当前进度，进度序号依次为0~n

简单引入

1
步骤1
步骤2
步骤3
展开代码
<template>
  <vi-steps style="height: 80px;" v-model="step">
    <vi-steps-item>
      <template>起承转合</template>
      <template v-slot:doing>
        壹
      </template>
      <template v-slot:finish>
        完
      </template>
    </vi-steps-item>
    <vi-steps-item/>
    <vi-steps-item/>
  </vi-steps>
  <vi-divider/>
  <vi-button @click="step = (step + 1) % 4">点击切换步骤</vi-button>
</template>
<script setup>
  const step = ref(0)
</script>

尺寸

通过css属性--vi-steps-item-size修改steps-item尺寸 --vi-steps-item-line修改steps-item间连接线长度 --vi-steps-gap修改连接线间距

1
步骤1
步骤2
步骤3
展开代码
<template>
  <vi-steps style="height: 70px; --vi-steps-item-size: 40px; --vi-steps-item-line: 35px; --vi-steps-gap: 20px;">
    <vi-steps-item/>
    <vi-steps-item/>
    <vi-steps-item/>
  </vi-steps>
</template>

插槽内容

通过插槽更改内容

壹
起
承
转
合
展开代码
<template>
  <vi-steps v-model="step" style="height: 80px; --vi-steps-item-size: 40px; --vi-steps-item-line: 60px; --vi-steps-gap: 8px;">
    <vi-steps-item>
      <template v-slot:default>起</template>
      <template v-slot:doing>壹</template>
      <template v-slot:finish>完</template>
    </vi-steps-item>
    <vi-steps-item>
      <template v-slot:default>承</template>
      <template v-slot:doing>贰</template>
      <template v-slot:finish>完</template>
    </vi-steps-item>
    <vi-steps-item>
      <template v-slot:default>转</template>
      <template v-slot:doing>叁</template>
      <template v-slot:finish>完</template>
    </vi-steps-item>
      <vi-steps-item>
      <template v-slot:default>合</template>
      <template v-slot:doing>肆</template>
      <template v-slot:finish>完</template>
    </vi-steps-item>
  </vi-steps>
  <vi-divider/>
  <vi-button @click="step = (step + 1) % 4">点击切换步骤</vi-button>
</template>
<script setup>
  const step = ref(0)
</script>

Props

steps

属性名描述类型默认值

插槽

steps

插槽名描述有无默认内容

steps-item

插槽名描述有无默认内容

事件支持

无

可覆写css变量

变量名描述默认值