vue双层进度条效果

在这里插入图片描述
进度条用的是elemen-ui的进度条组件。本来打算用css实现,但是没有找到双层的示例,,,被迫用进度条组件完成双层的进度条。

         <el-col :span="12" id="getHeight" ref="getHeight">
              <div style="text-align: center" class="process">
                <div>
                  <span class="process_text1">年累计&nbsp;&nbsp;</span>
                  <span class="process_text2">{{ fdl.bnlj }}&nbsp;</span>
                  <span class="process_text3">亿千瓦时</span>
                </div>
                <div style="margin-top: 5%">
                  <span class="process_text1">同比&nbsp;&nbsp;</span>
                  <span class="process_text4" v-if="fdl.isMoreYear"
                    >+&nbsp;{{ fdl.tbnlj }}</span
                  >
                  <span class="process_text6" v-else
                    >&nbsp;{{ fdl.tbnlj }}</span
                  >
                </div>
                <!-- :width="bigPro" :width="smallPro"-->
                <div style="text-align: center;margin-top:8%;position:relative;">
                  <div style="">
                    <el-progress
                      type="circle"
                      :percentage="fdl.rljd"
                      stroke-width="8"
                      color="#2264FF"
                      class="bigCircle"
                    ></el-progress>
                  </div>
                  <div style="position:absolute;top:9%;bottom:0;left:0;right:0;">
                    <el-progress
                      id="circle_two"
                      type="circle"
                      :percentage="fdl.njhwcl"
                      
                      stroke-width="8"
                      color="#FF6469"
                      class="smallCircle"
                    ></el-progress>
                  </div>
                </div>

主要是样式,开始也用定位把小圈定位到了大圈里面,但是页面缩小的时候我的两个圈位置就乱了,经过样式调整终于不会乱了,!!!!!实现了要的效果

在这里插入代码片
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue定时器进度条是通过利用Vue.js编写的一种实现效果,可以展示多个进度条,并通过定时器循环使其自增长。实现的原理是利用mounted生命周期和定时器来动态改变进度条的百分比值和状态。当进度条超过100%时,按钮将被禁用。具体的实现代码可以参考以下示例: 。 在Vue部分的代码中,首先导入Vue和Overlay组件,然后定义了data数据,包括了进度条的初始值、宽度、是否显示等。在mounted生命周期函数中,使用定时器来不断更新进度条的值,并在达到100%时清除定时器。processbar方法用于更新进度条的值,并通过改变Width的值来改变进度条的宽度。当进度条的值超过100时,将其设置为100,并返回当前进度条的值。 这样,通过利用Vue.js的定时器和生命周期函数,我们可以实现一个动态的进度条效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue实现多个进度条循环自增长动效,定时器实现自动变化的进度条组件](https://blog.csdn.net/qq_39532524/article/details/129162088)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue+定时器 自动变化的进度条](https://blog.csdn.net/weixin_46413834/article/details/119728489)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值