扩展组件(uni-ui)之uni-steps

uni-steps 是 uni-app 的 uni-ui 组件库中的一个组件,用于展示步骤条,常用于指引用户完成连续的任务流程,如购物结算、订单创建等。

基本用法

在使用 uni-steps 之前,你需要确保已经正确安装了 uni-ui 库,并在页面中引入了 uni-steps 组件。

引入组件

html 复制代码
<template>
    <uni-steps :active="active" :options="options"></uni-steps>
</template>

<script>
    import uniSteps from '@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue'
    export default {
        components: { uniSteps },
        data() {
            return {
                active: 1, // 当前步骤
                options: [ // 步骤条的步骤
                    { title: '步骤一' },
                    { title: '步骤二' },
                    { title: '步骤三' }
                ]
            }
        }
    }
</script>

属性

uni-steps 组件提供了以下属性:

  • active:当前的步骤,从 0 开始计数。
  • options:步骤条的步骤数组,每个元素是一个对象,通常包含 title(步骤标题)和其他你想要添加的属性。
  • direction:步骤条的方向,可选值为 horizontal(水平)和 vertical(垂直)。

示例

创建一个基础的步骤条:

html 复制代码
<uni-steps :active="1" :options="[
    { title: '步骤一' },
    { title: '步骤二' },
    { title: '步骤三' }
]"></uni-steps>

注意事项

  • active 属性控制当前激活的步骤,它是从 0 开始的索引,所以 active="1" 表示激活第二个步骤。
  • options 属性中的每个对象代表一个步骤,你可以根据需要添加更多的属性,例如描述文本等。
  • 步骤条可以是水平的也可以是垂直的,这取决于你如何设置 direction 属性。

更多关于 uni-steps 组件的使用细节,可以查阅 uni-ui 官方文档 或 uni-ui 库的相关文档。

相关推荐
耀耀切克闹灬18 小时前
生成tag号的脚本
前端
搬运达人18 小时前
React v19.2.0更新
前端
电蚊拍18 小时前
ADB 实现手机访问电脑上运行的网站,真机调试H5网站
前端
浩男孩18 小时前
🍀上班摸鱼,手搓了个分页器组件
前端
朕的剑还未配妥18 小时前
vue2项目中使用markdown-it插件教程,同时解决代码块和较长单词不换行问题
前端
清羽_ls18 小时前
前端代码CR小知识点汇总
前端·cr
WestWong18 小时前
基于 Web 技术栈的跨端开发模版
前端
饮水机战神18 小时前
小程序被下架后,我连夜加了个 "安全接口"
前端·javascript
小old弟18 小时前
小程序开发:原生 vs 跨平台框架全解析
前端
閞杺哋笨小孩18 小时前
Vue3 点击指令(防抖 / 节流)
前端·vue.js