Tuniao UI Uniapp V3

Appearance

12:13

TnSteps 步骤条 ​

该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景

组件位置 ​

typescript
import TnSteps from '@tuniao/tnui-vue3-uniapp/components/steps/src/steps.vue'
import TnStepsItem from '@tuniao/tnui-vue3-uniapp/components/steps/src/steps-item.vue'
import TnSteps from '@tuniao/tnui-vue3-uniapp/components/steps/src/steps.vue'
import TnStepsItem from '@tuniao/tnui-vue3-uniapp/components/steps/src/steps-item.vue'
typescript
import TnSteps from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps.vue'
import TnStepsItem from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps-item.vue'
import TnSteps from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps.vue'
import TnStepsItem from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps-item.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

  • 通过TnSteps的v-model绑定当前步骤的索引值，从 0 开始计数，如果默认没有选中任何步骤可以设置为-1
  • 通过TnStepsItem的title属性设置步骤的标题，icon属性设置步骤的图标，active-icon属性设置选中步骤后的图标
    • 如果没有设置title则只显示点或者图标
vue
<script lang="ts" setup>
import { ref } from 'vue'

const currentStep = ref(-1)

// 步进条数据
const stepsData = [
  {
    title: '第一步',
    icon: 'floral',
    activeIcon: 'floral-fill',
  },
  {
    title: '第二步',
    icon: 'success-circle',
    activeIcon: 'success-circle-fill',
  },
  {
    title: '第三步',
    icon: 'floral',
    activeIcon: 'floral-fill',
  },
  {
    title: '第四步',
    icon: 'floral',
    activeIcon: 'floral-fill',
  },
]
</script>

<template>
  <TnSteps v-model="currentStep" mode="dot">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const currentStep = ref(-1)

// 步进条数据
const stepsData = [
  {
    title: '第一步',
    icon: 'floral',
    activeIcon: 'floral-fill',
  },
  {
    title: '第二步',
    icon: 'success-circle',
    activeIcon: 'success-circle-fill',
  },
  {
    title: '第三步',
    icon: 'floral',
    activeIcon: 'floral-fill',
  },
  {
    title: '第四步',
    icon: 'floral',
    activeIcon: 'floral-fill',
  },
]
</script>

<template>
  <TnSteps v-model="currentStep" mode="dot">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>

设置步骤条的模式 ​

通过TnSteps的mode属性设置步骤条的模式，可选值为dot、number、dotIcon、icon，默认为dot

dot 模式 ​

点模式，在该模式下会显示一个圆点

vue
<template>
  <TnSteps v-model="currentStep" mode="dot">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>
<template>
  <TnSteps v-model="currentStep" mode="dot">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>

number 模式 ​

数字模式，在该模式下未选中时会显示一个数字，选中之后数字会变成一个勾选的图标

vue
<template>
  <TnSteps v-model="currentStep" mode="number">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>
<template>
  <TnSteps v-model="currentStep" mode="number">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>

dotIcon 模式 ​

点图标模式，在该模式下未选中时会显示一个点，选中之后图标会变成active-icon的图标

vue
<template>
  <TnSteps v-model="currentStep" mode="dotIcon">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>
<template>
  <TnSteps v-model="currentStep" mode="dotIcon">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>

icon 模式 ​

图标模式，在该模式下未选中时会显示icon的图标，选中之后图标会变成active-icon的图标

vue
<template>
  <TnSteps v-model="currentStep" mode="icon">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>
<template>
  <TnSteps v-model="currentStep" mode="icon">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>

修改步进条的样式 ​

  • 通过TnSteps中的active-color设置选中时的颜色，如果单独设置了TnStepsItem的active-color则会覆盖TnSteps中的active-color，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色和文本颜色
  • 通过TnSteps中的color设置未选中时的颜色，如果单独设置了TnStepsItem的color则会覆盖TnSteps中的color，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色和文本颜色

在不同的模式下，TnStepsItem的样式会有所不同

dot 模式 ​

color和active-color分别设置未选中和选中时点的背景颜色

number 模式 ​

color和active-color分别设置未选中时的数字颜色和选中后的背景颜色

dotIcon 模式 ​

color和active-color分别设置未选中时的点的背景颜色和选中后的图标颜色

icon 模式 ​

color和active-color分别设置未选中时的图标颜色和选中后的图标颜色

vue
<template>
  <TnSteps
    v-model="currentStep"
    color="tn-grey-light"
    active-color="rgba(1, 190, 255, 0.4)"
  >
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>
<template>
  <TnSteps
    v-model="currentStep"
    color="tn-grey-light"
    active-color="rgba(1, 190, 255, 0.4)"
  >
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>

禁止点击步骤条 ​

通过TnSteps的disabled属性设置是否禁止点击步骤条，默认为false，也可以单独设置TnStep的disabled属性来禁止点击某个步骤

全部禁止点击 ​

vue
<template>
  <TnSteps v-model="currentStep" disabled>
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>
<template>
  <TnSteps v-model="currentStep" disabled>
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnSteps>
</template>

禁止点击某一个选项 ​

vue
<template>
  <TnSteps v-model="currentStep">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :disabled="index === 2"
    />
  </TnSteps>
</template>
<template>
  <TnSteps v-model="currentStep">
    <TnStepsItem
      v-for="(item, index) in stepsData"
      :key="index"
      :title="item.title"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :disabled="index === 2"
    />
  </TnSteps>
</template>

API ​

Props ​

Steps Props ​

属性名说明类型默认值可选值
v-model/model-value当前选中的步骤String | Number--
mode步骤条的模式Stringdotdot \ number \ dotIcon \ icon
color步骤条内容默认颜色，支持图鸟内置的背景颜色值和文本颜色值、hex、rgb、rgbaString--
active-color步骤条内容激活后颜色，支持图鸟内置的背景颜色值和文本颜色值、hex、rgb、rgbaString--
disabled禁止点击步骤条Booleanfalsetrue

Steps Emits ​

事件名说明类型
change步骤发生改变的回调函数(index: number) => void

Steps Slots ​

插槽名说明子标签
default步骤条步骤TnStep

StepsItem Props ​

属性名说明类型默认值可选值
title步骤显示的文本String--
icon步骤默认显示的图标String-图标有效值
active-icon步骤激活时显示的图标String-图标有效值
color步骤内容默认颜色，支持图鸟内置的背景颜色值和文本颜色值、hex、rgb、rgbaString--
active-color步骤内容激活后颜色，支持图鸟内置的背景颜色值和文本颜色值、hex、rgb、rgbaString--
disabled禁止点击当前步骤Booleanfalsetrue

StepsItem Emits ​

事件名说明类型
click步骤点击时回调函数() => void

StepsItem Slots ​

插槽名说明
default自定义步骤的内容

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI