CareUI

# 步骤条

# 基本用法

# 带序的步骤条

已完成的步骤
0
进行中的步骤
0
未进行的步骤
0
未进行的步骤

已完成的步骤
点击切换步骤
进行中的步骤
点击切换步骤
0
进行中的步骤
这是进行中的步骤
0
已完成的步骤
点击切换步骤
<template>
    <div>
        <!-- 如果 t-step-item 没有传入 value，则使用 index 作为唯一标识 -->
        <t-steps :defaultCurrent="1">
            <t-step-item title="已完成的步骤"></t-step-item>
            <t-step-item title="进行中的步骤"></t-step-item>
            <t-step-item title="未进行的步骤"></t-step-item>
            <t-step-item title="未进行的步骤"></t-step-item>
        </t-steps>
        <br>
        <!-- 使用 options 渲染步骤条 -->
        <t-steps v-model="current" :options="steps"></t-steps>
    </div>
</template>

<script>
export default {
  data() {
    return {
      current: 'third',
      steps: [
        { title: '已完成的步骤', value: 'first', content: '点击切换步骤' },
        { title: '进行中的步骤', value: 'second', content: '点击切换步骤' },
        { title: '进行中的步骤', value: 'third', content: () => '这是进行中的步骤' },
        { title: '已完成的步骤', value: 'forth', content: '点击切换步骤' },
      ],
    };
  },
};
</script>
显示代码 复制代码

# 不带序的步骤条

已完成的步骤
这里是提示文字
进行中的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
<template>
  <t-steps theme="dot" :current="current" readonly>
        <t-step-item title="已完成的步骤" content="这里是提示文字"></t-step-item>
        <t-step-item title="进行中的步骤" content="这里是提示文字"></t-step-item>
        <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
        <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
  </t-steps>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
    };
  },
};
</script>
显示代码 复制代码

# 垂直步骤条

# 带序的步骤条

已完成的步骤
这里是提示文字
0
进行中的步骤
这里是提示文字
0
未进行的步骤
这里是提示文字
0
未进行的步骤
这里是提示文字
已完成的步骤
这里是提示文字
0
进行中的步骤
这里是提示文字
0
未进行的步骤
这里是提示文字
0
未进行的步骤
这里是提示文字
<template>
    <div class="demo-steps-column">
        <t-steps layout="vertical" :current="1" readonly>
            <t-step-item title="已完成的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="进行中的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
        </t-steps>
        <div style="margin: 16px 0"></div>
        <t-steps layout="vertical" sequence="reverse" :current="1" readonly>
            <t-step-item title="已完成的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="进行中的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
        </t-steps>
    </div>
</template>
显示代码 复制代码

# 不带序的步骤条

已完成的步骤
这里是提示文字
进行中的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
已完成的步骤
这里是提示文字
进行中的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
<template>
    <div class="demo-steps-column">
        <t-steps layout="vertical" theme="dot" :current="1" readonly>
            <t-step-item title="已完成的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="进行中的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
        </t-steps>
        <t-steps layout="vertical" sequence="reverse" theme="dot" :current="1" readonly>
            <t-step-item title="已完成的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="进行中的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
            <t-step-item title="未进行的步骤" content="这里是提示文字"></t-step-item>
        </t-steps>
    </div>
</template>
显示代码 复制代码

# 自定义的步骤条

登录
已完成状态
购物
进行中状态
<template>
    <t-steps :current="1" readonly>
        <!-- 方式一：使用插槽自定义图标 -->
        <t-step-item title="登录" content="已完成状态">
            <i slot="icon" class="care-icon-like"></i>
        </t-step-item>
        <!-- 方式二：使用渲染函数 icon 自定义图标 -->
        <t-step-item title="购物" content="进行中状态" :icon="renderCartIcon"></t-step-item>
  </t-steps>
</template>
<script>
export default {
    methods: {
        renderCartIcon() {
            return <i slot="icon" class="care-icon-like"></i>;
        },
    }
};
</script>
显示代码 复制代码

← Tabs 选项卡 →