uniapp步骤条 组件

devtools/2024/9/23 10:50:06/
//子组件
<template><view class="container-step"><view class="uni-padding-wrap"><view class="progress-box"><progress :percent="3" active="true"   stroke-width="2" /></view><view class="progress-bar"><view class="bar-item"  v-for="(item,index) in stepList" :key="index" :class="showStep>=index+1?'itemActive':'itemDefault'"><view class="bar-round">{{item.step}}</view><view class="bar-info">{{item.name}}</view></view></view></view></view>
</template><script>export default {props: {showStep: {type: Number,default: 1},stepList: {type: Array,default: function(){return	[{step:1,name:'基本信息'},{step:2,name:'发票信息'},{step:3,name:'上传附件'}]}}}}}
</script><style scoped>.uni-padding-wrap {width: 750upx;height: 130upx;background: #F5F8FB;.progress-box {padding: 42upx 80upx 27upx 80upx;}.progress-bar {display: flex;justify-content: space-between;position: relative;top: -42upx;.bar-item {display: flex;flex-direction: column;text-align: center;.bar-round {width: 30upx;height: 30upx;color: #ffffff;/* background: #999999; */border-radius: 50%;font-size: 18upx;line-height: 30upx;text-align: center;margin: 0 80upx;margin-bottom: 6upx;}.bar-info {color: #999999;font-size: 24upx;margin: 0 40upx;}}.itemActive {.bar-round {background: #288FF6;}.bar-info {color: #288FF6;}}.itemDefault {.bar-round {background: #999999;}.bar-info {color: #999999;}}}}
</style>

父组件引用

<template>
<!--:stepList=[你需要传的值] :showStep=第几步->
<step-page :showStep="3" />
</template>
<script>import stepPage from '@/components/stepPage/index'export default {components: {stepPage}}

http://www.ppmy.cn/devtools/13278.html

相关文章

verilog 语法及特点

主线上的硬件描述语言有verilog 和 VHDL 两门&#xff0c; 由于 verilog 语法上比VHDL 语言灵活&#xff0c; 所以现在社区以 verilog 语言开发的项目占比更大。 但是相较于 现在流行的 java/python 计算机语言比起来&#xff0c; 其模块化管理要差很多&#xff0c; 所以现在社…

Qt Android 动态加载动态库失败

问题描述 经过了七七四十九个劫难后程序终于稳定运行起来了&#xff0c;正当我以为完美时&#xff0c;问题又找上门了&#xff0c;QML 里面的二维码图片加载不起来了&#xff0c;这个图片还不是本地图片&#xff0c;是实时生成的。 开始的时候并没有下面日志输出&#xff0c;…

Android --- Activity

官方文档-activity Activity 提供窗口&#xff0c;供应在其中多个界面。此窗口通常会填满屏幕&#xff0c;但也可能小于屏幕并浮动在其他窗口之上。 大多数应用包含多个屏幕&#xff0c;这意味着它们包含多个 Activity。通常&#xff0c;应用中的一个 Activity 会被指定主 Ac…

jvm-接口调用排查

问题描述 线上碰到个问题&#xff0c;某个接口调用时间特别长&#xff0c;线上调用接口直接报gateway time out 分析处理 1、先关闭该功能 &#xff08;该功能是非核心功能&#xff09; 2、本地起服务连环境排查&#xff0c;发现本地正常。并且线上其他接口正常&#xff0c;…

快速理解mysql事务

什么是mysql事务&#xff1f; 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 mysql事务特性 原子性&#xff1a;事务…

【1646】医院人员管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java 医院人员管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…

创建型设计模式

七大原则 1. 开闭原则&#xff08;Open-Closed Principle, OCP&#xff09; 详解&#xff1a;软件实体&#xff08;类、模块、函数等&#xff09;应该易于扩展&#xff0c;但是不易于修改。换句话说&#xff0c;当软件需求变化时&#xff0c;应该通过添加新代码来实现变化&am…

求臻医学MRD产品斩获2023年度肿瘤标志物年度十大创新技术产品奖

2024年4月20日&#xff0c;中国肿瘤标志物学术大会开幕式暨名家讲坛在南京隆重召开! 会议期间&#xff0c;中国抗癌协会肿瘤标志专业委员会联合中国抗癌协会肿瘤临床检验与伴随诊断专业委员会、中国抗癌协会肿瘤基因诊断专业委员等共同发布“2023 年度肿瘤标志物创新技术产品”…