当前位置: 首页 > news >正文

uniapp 微信小程序 vue3.0+TS手写自定义封装步骤条(setup)

uniapp手写自定义步骤条(setup)

话不多说 先上效果图:
在这里插入图片描述
setup.vue组件代码:

<template><view class="stepBox"><viewclass="stepitem"v-for="(item, index) in stepList":key="index":style="stepList.length > index + 1 ? 'width:200rpx' : 'width:60rpx'"><img :src="item.activeimg" class="img" v-if="activestep >= index + 1" /><img :src="item.img" class="img" v-else /><view:class="activestep >= index + 1 ? 'circle activecircle' : 'circle'"></view><view:class="activestep > index + 1 ? 'line activeline' : 'line'"v-if="stepList.length > index + 1"></view><view :class="index + 1 == 3 ? 'text1' : 'text'">{{ item.title }}</view></view></view>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
const props = withDefaults(defineProps<{ activestep: Number }>(), {activestep: 0,
});
const stepList = ref<any>([{img: "../static/image/setups/a1.png",activeimg: "../static/image/setups/a.png",title: "未开始",},{img: "../static/image/setups/b1.png",activeimg: "../static/image/setups/b.png",title: "核查中",},{img: "../static/image/setups/c1.png",activeimg: "../static/image/setups/c.png",title: "结果审核中",},{img: "../static/image/setups/d1.png",activeimg: "../static/image/setups/d.png",title: "已完成",},
]);
</script>
<style lang="scss" scoped>
.stepBox {width: 100%;margin: 0 auto;display: flex;justify-content: center;align-items: center;background: #fff;.stepitem {height: 150rpx;position: relative;.img {position: absolute;top: 0px;left: -18rpx;width: 56rpx;height: 56rpx;}.circle {position: absolute;top: 60rpx;width: 18rpx;height: 18rpx;border-radius: 50%;background: #e7eaea;}.activecircle {background: #59c28a;}.line {position: absolute;top: 68rpx;left: 18rpx;border-bottom: 4rpx solid #e7eaea;width: calc(100% - 18rpx);z-index: 10;}.activeline {border-bottom: 4rpx solid #00cd73;}.text {position: absolute;top: 85rpx;left: -34rpx;font-size: 28rpx;color: #0e102b;}.text1 {position: absolute;top: 85rpx;left: -62rpx;font-size: 28rpx;color: #0e102b;}}
}
</style>

以下是用到的图片
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

相关文章:

uniapp 微信小程序 vue3.0+TS手写自定义封装步骤条(setup)

uniapp手写自定义步骤条&#xff08;setup&#xff09; 话不多说 先上效果图&#xff1a; setup.vue组件代码&#xff1a; <template><view class"stepBox"><viewclass"stepitem"v-for"(item, index) in stepList":key"i…...

Python 金融大数据分析

第一章 为什么将python用于金融 python编程语言 python是一种高级的多用途编程语言&#xff0c;广泛用于各种非技术和技术领域。 python是一种具备动态语义、面向对象的解释型高级编程语言。它的高级内建数据结构与动态类型及动态绑定相结合&#xff0c;使其在快速应用开发上…...

初识C++入门(1)

为什么会衍生出C&#xff1f; C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c;20世纪80年代&#xff0c;计算机界提出…...

使用Selenium的WebDriver进行长截图

from selenium import webdriver from PIL import Image from io import BytesIO # 创建浏览器驱动 driver webdriver.Chrome()# 打开网页 driver.get("https://www.douban.com/") # 替换为您要截图的网页URL def get_long_shot(driver,table_element):# 获取页面的…...

python+大数据校园卡数据分析 计算机竞赛

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于yolov5的深度学习车牌识别系统实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;3分 该项目较为新颖&am…...

【机器学习】sklearn降维算法PCA

文章目录 降维PCAsklearn中的PCA代码实践 PCA对手写数字数据集的降维 降维 如何实现降维&#xff1f;【即减少特征的数量&#xff0c;又保留大部分有效信息】 将那些带有重复信息的特征合并&#xff0c;并删除那些带无效信息的特征等等&#xff0c;逐渐创造出能够代表原特征矩…...

华为云云耀云服务器L实例评测|企业项目最佳实践之评测用例(五)

华为云云耀云服务器L实例评测&#xff5c;企业项目最佳实践系列&#xff1a; 华为云云耀云服务器L实例评测&#xff5c;企业项目最佳实践之云服务器介绍(一) 华为云云耀云服务器L实例评测&#xff5c;企业项目最佳实践之华为云介绍(二) 华为云云耀云服务器L实例评测&#xff5…...

Xcode升级到15.0 解决DT_TOOLCHAIN_DIR问题

根据个人开发遇到的问题做的总结&#xff0c;公司要求Xcode 14.2 &#xff0c;Swift 5.7开发&#xff0c;由于升级了Mac 14.0系统后&#xff0c;Xcode 14.2不能使用&#xff0c;解决方案目前有2个 一、在原来Xcode 14.2 的显示包内容&#xff0c;如图 二、升级到Xcode的15.0后…...

小谈设计模式(29)—访问者模式

小谈设计模式&#xff08;29&#xff09;—访问者模式 专栏介绍专栏地址专栏介绍 访问者模式角色分析访问者被访问者 优缺点分析优点将数据结构与算法分离增加新的操作很容易增加新的数据结构很困难4 缺点增加新的数据结构比较困难增加新的操作会导致访问者类的数量增加34 总结…...

【25】c++设计模式——>责任链模式

责任链模式定义 C中的责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它通过将请求沿着处理对象的链传递来避免把请求发送者与接收者耦合在一起。 责任链模式的主要思想是&#xff0c;通过将多个处理对象组成一条链&…...

GlobalTransactional

seata-spring的maven坐标&#xff1a; <dependency><groupId>io.seata</groupId><artifactId>seata-spring</artifactId><version>1.6.1</version> </dependency>GlobalTransactional注解的位置&#xff1a; io.seata.sprin…...

Android Studio运行kotlin项目,一直Read timed out

Android Studio运行kotlin项目&#xff0c;一直Read timed out 下载别人的Kotlin项目&#xff0c;导入as后&#xff0c;运行app一直失败&#xff0c;提示Read timed out&#xff0c;有2种解决办法 第一种方式&#xff1a;gradle.properties 修改kotlin项目种的gradle.proper…...

Excel 的单元格内容和单元格格式

文章目录 单元格内容单元格格式常规格式数字格式 单元格内容 文本&#xff1a;只要不是纯数字&#xff0c;Excel 都默认是文本格式。 在 Excel 中&#xff0c;逻辑值只有两个&#xff1a;True 和 False。 全选一片区域&#xff0c;按 Delet 键删除内容时&#xff0c;确实可以删…...

4大软件测试策略的特点和区别(单元测试、集成测试、确认测试和系统测试)

四大软件测试策略分别是单元测试、集成测试、确认测试和系统测试。 一、单元测试 单元测试也称为模块测试&#xff0c;它针对软件中的最小单元&#xff08;如函数、方法、类、模块等&#xff09;进行测试&#xff0c;以验证其是否符合预期的行为和结果。单元测试通常由开发人…...

armbian 安装mysql

1、执行安装指令 sudo apt-get update sudo apt-get install mysql-server 2、安装成功后&#xff0c;设置密码 ALTER USER root% IDENTIFIED WITH mysql_native_password BY ysw1234; flush privileges;3、设置允许远程连接并生效 use mysql; update user set host % whe…...

Ubuntu22常用软件

别存太多重要东西在Ubuntu &#xff0c;硬盘损坏就麻烦 Tweaks自定义UI sudo apt intall gnome-tweaks为了方便管理和添加&#xff0c;还需添加&#xff1a; sudo apt install gnome-shell-extension-prefs gnome-shell-extension-manager -y1.打开Extension应用&#xff0c;添…...

【CFD小工坊】浅水模型的边界条件

【CFD小工坊】浅水模型的边界条件 前言处理边界条件的原则边界处水力要素的计算水位边界条件单宽流量边界条件流量边界条件固壁边界条件 参考文献 前言 在浅水方程的离散及求解方法一篇中&#xff0c;我们学习了三角形网格各边通量值及源项的求解。但仍有一个问题没有解决&…...

电力物联网关智能通讯管理机-安科瑞黄安南

众所周知&#xff0c;网关应用于各种行业的终端设备的数据采集与数据分析&#xff0c;然后去实现设备的监测、控制、计算&#xff0c;为系统与设备之间建立通讯联系&#xff0c;达到双向的数据通讯。 网关可以实时监测并及时发现异常数据&#xff0c;同时自身根据用户规则进行…...

用Flask构建一个AI翻译服务

缘起 首先&#xff0c;看一段代码&#xff0c;只有几行Python语句却完成了AI翻译的功能。 #!/usr/bin/python3import sys from transformers import MarianMTModel, MarianTokenizerdef translate(word_list):model_name "Helsinki-NLP/opus-mt-en-zh"tokenizer …...

微信小程序引入阿里巴巴iconfont图标并使用

介绍 在小程序里&#xff0c;使用阿里巴巴的图标&#xff0c;如下所示: 使用方式 搜索自己需要的图标&#xff0c;然后将需要用到的图标加入购物车&#xff0c;如下图所示&#xff1a; 去右上角&#xff0c;点击购物车按钮&#xff1b;这里第一次使用&#xff0c;会有三个提…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...