uniapp实现进度条组件

在这里插入图片描述

  1. 首先,在uniapp项目中创建一个自定义组件,可以命名为Progress.vue。
  2. 在Progress.vue中,编写如下代码:
<template>
  <view class="progress">
    <view class="progress-bar" :style="{width: progress + '%'}"></view>
  </view>
</template>


export default {
  props: {
    progress: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style>
.progress {
  width: 100%;
  height: 10px;
 background-color: #f0f0f0;
}

.progress-bar {
  height: 100%;
  background-color: #0078d4;
}
</style>
  1. 在需要使用进度条的页面中,引入Progress组件,并传入后端返回的进度值作为props:
<template>
  <view>
    <Progress :progress="progress"></Progress>
  </view>
</template>

<script>
import Progress from '@/components/Progress.vue'

export default {
  components: {
    Progress
  },
  data() {
    return {
      progress: 8 // 假设后端返回的进度值为8
    }
  }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/429007.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Matlab 机器人工具箱 符合动力学

文章目录 1 符合化表示1.1 标准DH动力学1.2 改进DH动力学 质量集中在质心1.2 改进DH动力学 质量集中在末端1.3 程序问题1.3.1 Unable to perform assignment because value of type sym is not convertible to double.1.3.2 CAT arguments dimensions not consistent.参考链接1…

YOLOv5独家原创改进:特征融合涨点篇 | 广义高效层聚合网络(GELAN) | YOLOv9

💡💡💡本文独家改进:即结合用梯度路径规划(CSPNet)和(ELAN)设计了一种广义的高效层聚合网络(GELAN),高效结合YOLOv5,实现涨点。 将GELAN添加在backbone和head处,提供多个yaml改进方法 💡💡💡在多个私有数据集和公开数据集VisDrone2019、PASCAL VOC实现…

前端学习之HTML(第一天)

什么是HTML HTML是一种用来描述网页的一种语言&#xff0c;HTML不是一种编程语言&#xff0c;而是一种标记语言。 HTML标签 HTML 标签是由尖括号包围的关键词&#xff0c;比如 <html> HTML 标签通常是成对出现的&#xff0c;比如 <b> 和 </b> 标签对中的…

【微服务-Nacos】一篇文章教你搞定Nacos部署

前面我们提到过&#xff0c;在微服务架构中&#xff0c;Nacos注册中心属于核心组件&#xff0c;通常我们会采用高性能独立服务器进行部署&#xff0c;下面我们一起来看看Nacos部署过程&#xff1a; 1、环境准备 因为Nacos是支持windows和Linux系统的&#xff0c;且服务器操作…

订单超时取消如何实现

方法1&#xff1a; DelayQueue&#xff1a;超时作为排序条件&#xff0c;轮询订单头部&#xff0c;若超市&#xff0c;出队进行超时处理 优点&#xff1a;简单 缺点&#xff1a;不能持久化&#xff0c;并发量低 方法2&#xff1a; 方法四&#xff1a;定时调度&#xff08;什…

基于Springboot的无人智慧超市管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的无人智慧超市管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

【项目实践】如何解决并发场景下数据一致性问题

1.背景 并发写场景下&#xff0c;由于微服务的系统环境复杂&#xff0c;不可避免的会出现 【机器、缓存、数据库、依赖服务】等出现问题&#xff0c;导致数据不一致的情况产生。 影响大且广&#xff1a; 1、数据不一致问题在线上可能会产生故障 2、数据不一致会导致长尾错误…

group by报错

# 报错&#xff1a;[42000][1055] Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column base.biz_org_rep.ID which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_modeonly_full_grou…

xss.haozi.me:0x08

</style ><script> alert(1)</script>

命名空间(namespace)

定义 在C中&#xff0c;命名空间&#xff08;Namespace&#xff09;是一个特性&#xff0c;用于封装代码并避免名称冲突。命名空间可以看作是一个容器&#xff0c;其中可以包含类、函数、变量、常量、其他命名空间等。通过使用命名空间&#xff0c;我们可以更好地组织代码&…

什么是Docker容器?

Docker是一种轻量级的虚拟化技术&#xff0c;同时是一个开源的应用容器运行环境搭建平台&#xff0c;可以让开发者以便捷方式打包应用到一个可移植的容器中&#xff0c;然后安装至任何运行Linux或Windows等系统的服务器上。相较于传统虚拟机&#xff0c;Docker容器提供轻量化的…

Linux设备模型(十) - bus/device/device_driver/class

四&#xff0c;驱动的注册 1&#xff0c;struct device_driver结构体 /** * struct device_driver - The basic device driver structure * name: Name of the device driver. * bus: The bus which the device of this driver belongs to. * owner: The module own…

selenuim【1】$x(‘xpath’)、WebDriverWait()、try/assert

文章目录 1、执行driver webdriver.Chrome()后很久才打开浏览器2、浏览器多元素定位 $x(‘xpath语法’)3、打开浏览器driver.get("网址")执行了很久才开始定位元素&#xff1a;等待&#xff08;1&#xff09;driver.set_page_load_timeout(t)&#xff08;2&#xff…

VMwareWorkstation17.0虚拟机搭建WindowsXP虚拟机(完整安装步骤详细图文教程)

VMwareWorkstation17.0虚拟机搭建WindowsXP虚拟机&#xff08;完整安装步骤详细图文教程&#xff09; 一、Windows XP1.Windows XP简介2.Windows XP 的下载地址 二、配置 Windows XP 虚拟机运行环境1.新建虚拟机2.选择类型配置3.插入WinXP光盘映像文件(ISO)4.选择操作系统5.命名…

阿里工作10年,失业4个月,每天都在崩溃边缘,有些事现在才明白

在近年的互联网行业风波中&#xff0c;不少大型企业开始缩减人员&#xff0c;而众多小企业则面对生死的考验。在这股裁员潮中&#xff0c;许多人失去了工作&#xff0c;长时间找不到新的就业机会&#xff0c;心中满是失望和绝望。 一位拥有十年工作经验的前阿里巴巴员工在网络上…

浅谈WPF之Binding数据校验和类型转换

在WPF开发中&#xff0c;Binding实现了数据在Source和Target之间的传递和流通&#xff0c;就像现实生活中的一条条道路&#xff0c;建立起了城镇与城镇之间的衔接&#xff0c;而数据校验和类型转换&#xff0c;就像高速公路之间的收费站和安检站。那在WPF开发中&#xff0c;如何…

【一起学习Arcade】(6):属性规则实例_约束规则和验证规则

一、约束规则 约束规则用于指定要素上允许的属性配置和一般关系。 与计算规则不同&#xff0c;约束规则不用于填充属性&#xff0c;而是用于确保要素满足特定条件。 简单理解&#xff0c;约束规则就是约束你的编辑操作在什么情况下可执行。 如果出现不符合规则的操作&#…

MySQL表分区技术介绍

目录 1. 分区概述 1.1 表分区 1.2 表分区与分表的区别 1.3 表分区的好处 1.4 分区表的限制因素 2. 如何判断当前MySQL是否支持分区&#xff1f; 3. 分区类型详解 3.1 MySQL支持分区类型 3.2 RANGE分区 3.2.1 根据数值范围分区 3.2.2 根据TIMESTAMP范围分区 3.2.3 根…

Vue - 调用接口获取文件数据流并根据类型预览

Vue - 调用接口获取文件数据流并根据类型预览 一、接口返回的数据流格式二. 方法实现1. image 图片类型2. txt 文件类型3. pdf 文件类型 一、接口返回的数据流格式 二. 方法实现 1. image 图片类型 <img :src"imageUrl" alt"" srcset"" /&g…

LeetCode每日一题【c++版】

20240227-困难2867-统计树中的合法路径数目 一、概述 由于比较难打&#xff0c;直接截图贴过来了&#xff01; 二、思路 预处理得到 [1,n]中的所有质数&#xff0c;其中 prime[i]是否为质数。根据二维整数整数构建图 g&#xff0c;其中 g[i]表示节点i的所有邻居节点。如果一条…