扩展组件(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 库的相关文档。

相关推荐
程序员韩立几秒前
现代全栈开发:Next.js与Node.js实战指南
前端·后端
航Hang*3 分钟前
WEBSTORM前端 —— 第2章:CSS —— 第2节:文字控制属性与CSS特性
前端·css·css3·html5·webstorm
小桥风满袖6 分钟前
Three.js-硬要自学系列18 (模型边界线、几何体顶点颜色、网格模型颜色渐变)
前端·css·three.js
JHC0000006 分钟前
DrissionPage 请求一次换一个代理(不重启chrome)
前端·chrome
David凉宸6 分钟前
视频融合 hls流如何对接
前端·音视频开发
萌萌哒草头将军7 分钟前
🚀🚀🚀 神了!RedwoodJS 轻松碾压 NextJS,成了我的最爱❤️
前端·react.js·全栈
CF14年老兵9 分钟前
当 JavaScript 遇上 Rust/Go:一场 “速度诱惑” 下的生态保卫战
前端·javascript·rust
David凉宸9 分钟前
vue手写日历
前端·javascript
itsOli15 分钟前
(25)性能优化和项目上线 | Vue.js 项目实战: 移动端“旅游网站”开发
前端·javascript·vue.js
梨啊梨b15 分钟前
使用CSS混合模式轻松实现Mp4视频透明背景
前端