免费个人网站自助建设,网站添加百度商桥,根据网站做软件,如何写网站建设报告项目实训-vue#xff08;十二#xff09; 文章目录 项目实训-vue#xff08;十二#xff09;1.概述2.处理进度可视化 1.概述
本篇博客将记录我在图片上传页面中的工作。
2.处理进度可视化
除了导航栏之外#xff0c;我们还需要对上传图片以及图片处理的过程以及流程进行…项目实训-vue十二 文章目录 项目实训-vue十二1.概述2.处理进度可视化 1.概述
本篇博客将记录我在图片上传页面中的工作。
2.处理进度可视化
除了导航栏之外我们还需要对上传图片以及图片处理的过程以及流程进行处理。 这段代码主要使用element组件库中的步骤条来实现的。 具体代码实现 el-cardclassel-card-uploadstylewidth: 100%;height: 1050px;margin: 0 auto;margin-bottom: 30px;/* overflow-y: auto; */!-- 步骤情况 --el-steps:activeactivefinish-statussuccessstylemargin: 20pxalign-centerel-step title上传息肉图片/el-stepel-step title处理中/el-stepel-step title获得检测结果/el-step/el-steps!-- 上传框 --divv-loadingloadingv-show!showReturnImageelement-loading-text图片处理中stylepadding-top: 100px这段代码使用 Element UI 的 el-card 组件创建一个包含步骤指示器和上传框的界面。卡片内设置了一个步骤条 el-steps显示了三个步骤“上传息肉图片”、“处理中”、和获得检测结果通过 :active 属性动态显示当前的步骤状态。卡片还包含一个上传框使用 v-loading 指令显示加载状态并在图片处理中时显示加载文本图片处理中。通过这种设计用户能够直观地了解并参与息肉图片上传和处理的整个流程。
除此之外还需要对此代码进行逻辑处理以及控制。 当上传图片按钮被点击之后会调用upload函数此时该部分代码会将 this.active 1即表示为第1步的情况初始的active 0。 当图片调用外部的处理函数处理完成之后再将active的值设置为3从而标志其进入了下一步操作。
实现效果如下
