当前位置: 首页 > 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;会有三个提…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...