vue圆形进度条,vue 进度条 百分比

　　本文主要详细介绍了用Vue实现动态圆百分比进度条。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　最近在开发一个小程序的时候，碰到一个实现圆百分比进度条的需求，类似于下面这个设计图：

　　小白，我觉得很难实施，所以我去百度看看别人是怎么做的。结果没找到满意的。如果不是静态实现，就需要使用更多的DOM操作。小程序还是尽量避免直接操作DOM。

　　下面是我以Vue组件的形式做的一个动态实现，首先是渲染图：

效果

实现步骤

　　画一个饼图。馅饼{

　　显示：内嵌-块；

　　位置：相对；

　　宽度：150px

　　高度：150px

　　边距-顶部：40px

　　边界半径：50%；

　　背景：# ccc

　　背景图像：线性渐变(向右，透明50%，# 4479 FD 0)；

　　颜色：透明；

　　文本对齐：居中；

　　}

　　实现占比效果

　　通过添加伪元素遮挡和移动，代码如下：馅饼：之前{

　　内容：“”；

　　位置：绝对；

　　top:0；左：50%；

　　宽度：50%；身高：100%；

　　边框半径：0 100% 100% 0/50%；

　　背景色：继承；

　　变换-原点：左；

　　动画：自旋5s线性无限，bg 10s步端无限；

　　}

　　@关键帧旋转{

　　to { transform:rotate(. 5 turn)；}

　　}

　　@关键帧背景{

　　50% {背景：# 4479FD}

　　}

　　使用CSS动画延迟属性

　　将以上animation动画时间分别改为50，100，这样就可以在animation-delay中直接输入对应的延迟秒数，比如-60s显示为60%。

　　动画-播放-状态：暂停；

　　动画-延时：-60s；

　　实现圆环形状

　　在div中直接加一个定位div。

　　div class=馅饼

　　div class=pie-inner

　　{ {数字}}%

　　/div

　　/div

　　加上一个匀速动画

　　startAnimate(步进、极限、速度){

　　setTimeout(()={

　　//num是百分比。

　　if (this.num limit) {

　　this.num=步骤

　　this.startAnimate(步长、极限、速度)

　　}否则{

　　this.num=限制

　　}

　　}，速度)

　　}

　　将计算属性绑定到animation-delay

　　根据实时num，换算成相应的延时秒数。

　　计算值：{

　　延迟(){

　　返回`-${this.num}s

　　}

　　}

总结

　　到目前为止，已经基本实现了一个动态的圆百分比进度条，但是还不完善。请随时提出任何意见或问题。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。