uniapp步骤条 组件

server/2024/9/23 11:00: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/server/20000.html

相关文章

JVM的运行时数据区

之前的文章有讲过&#xff0c;Java 源代码文件经过编译器编译后会生成字节码文件&#xff0c;并且经过类加载器加载之后会交给执行引擎执行&#xff0c;并在执行过程中&#xff0c;Java会划出一片空间去存储执行期间所用到的数据&#xff0c;这片空间成为运行时数据区。 根据 …

C语言 | Leetcode C语言题解之第48题旋转图像

题目&#xff1a; 题解&#xff1a; void swap(int* a, int* b) {int t *a;*a *b, *b t; }void rotate(int** matrix, int matrixSize, int* matrixColSize) {// 水平翻转for (int i 0; i < matrixSize / 2; i) {for (int j 0; j < matrixSize; j) {swap(&matr…

vue3 ——笔记 (表单输入,监听器)

表单输入 在Vue 3中&#xff0c;v-model指令的用法稍有不同于Vue 2。在Vue 3中&#xff0c;v-model指令实际上是一个语法糖&#xff0c;它会自动将value属性和input事件绑定到组件或元素上&#xff0c;以实现双向数据绑定。 在自定义组件中使用v-model时&#xff0c;需要在组…

【Pytorch】(十三)模型部署: TorchScript

文章目录 &#xff08;十三&#xff09;模型部署: TorchScriptPytorch动态图的优缺点TorchScriptPytorch模型转换为TorchScripttorch.jit.tracetorch.jit.scripttrace和script的区别总结trace 和script 混合使用保存和加载模型 &#xff08;十三&#xff09;模型部署: TorchScr…

iOS(Object C) 插入排序

插入排序的思想: 可以想象你在打牌,手里有一张牌2, 第一次摸到一张牌5; 5 比1 大,所以摸到的牌5放在1的右边; (此时手里的牌为 2->5) 第二次摸到一张牌3; 3比5小,所以3和5互换位置,再拿3和2比,3比2大,3不动(此时手里的牌为 2-> 3 -> 5) 第三次摸到一张牌1,1比5小,…

前端学习<四>JavaScript——54-原型链

常见概念 构造函数 构造函数-扩展 原型规则和示例 原型链 instanceof 构造函数 任何一个函数都可以被 new&#xff0c;new 了之后&#xff0c;就成了构造方法。 如下&#xff1a; function Foo(name, age) {this.name name;this.age age;//retrun this; //默认有这…

react 遇到的问题1 ——( 数据更新视图没更新)已解决

问题&#xff1a; 使用react开发项目时&#xff0c;使用useState 定义数据&#xff0c;通过定义的set方法修改数据&#xff0c;视图没有更新 原因&#xff1a; 在 React 中使用 useState 定义数据时&#xff0c;useState 返回一个数组&#xff0c;包含当前状态和更新的函数。…

【学习】软件测试自动化,是未来的趋势还是当前的必需

在当今快速迭代的软件开发周期中&#xff0c;速度和质量成为了企业生存的关键。随着DevOps实践的普及和持续集成/持续部署&#xff08;CI/CD&#xff09;流程的标准化&#xff0c;软件测试自动化已经从未来的趋势转变为当前的必要性。本文将探讨自动化测试的现状、必要性以及其…