css3实现圆环进度条,vue圆形进度条

　　这篇文章主要介绍了某视频剪辑软件实现圆环进度条的示例，帮助大家更好的理解和使用前端框架进行开发，感兴趣的朋友可以了解下

　　数据展示，一直是各行各业乐此不疲的需求，具体到前端开发行业，则是各种各种图表数据展示，各种表格数据展示，烦不胜烦（繁不胜繁)!

　　前几天刚做了折线图、柱状图、饼状图之类的图表数据展示效果，今天又碰到了类似圆环进度条的展示效果。天天跟数据打交道，天天跟接口打交道，项目做了不少，菜逼还是菜逼，都是泪啊！

　　其实说白了，是自己对帆布不熟，对CSS3不熟，所以就找了一个现成的轮子：

　　模板

　　div class=content ref=box

　　SVG style= transform:rotate(-90度):width= width :height= width xmlns= http://www。w3。 org/2000/SVG

　　圆：r=(宽度-半径)/2

　　:cy=宽度/2

　　:cx=宽度/2

　　：笔画宽度=半径

　　:stroke=backgroundColor

　　填充=无

　　/

　　circle ref=$bar

　　:r=(宽度-半径)/2

　　:cy=宽度/2

　　:cx=宽度/2

　　:stroke=barColor

　　：笔画宽度=半径

　　:stroke-linecap=isRound？圆形:方形

　　:stroke-dasharray=(宽度-半径)*3.14

　　:stroke-dashoffset=isAnimation？（宽度-半径)* 3.14:(宽度-半径)* 3.14 * (100 -进度)/100

　　填充=无

　　/

　　/svg

　　div class= center _ text :style= { color，fontSize}

　　p v-if=！$老虎机。default class= title " { progress } } %/p

　　插槽/插槽

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　道具：{

　　半径：{

　　类型：[数字，字符串],

　　默认值：20

　　}, //进度条厚度

　　进度：{

　　类型：[数字，字符串],

　　默认值：20

　　}, //进度条百分比

　　条形颜色：{

　　类型：字符串，

　　默认值： #1890ff

　　}, //进度条颜色

　　背景颜色：{

　　类型：字符串，

　　默认值：" rgba(0，0，0，0.3)"

　　}, //背景颜色

　　isAnimation: {

　　//是否是动画效果

　　类型：布尔型，

　　默认值：真

　　},

　　isRound: {

　　//是否是圆形画笔

　　类型：布尔型，

　　默认值：真

　　},

　　id: {

　　//组件的id，多组件共存时使用

　　类型：[字符串，数字],

　　默认值：1

　　},

　　持续时间：{

　　//整个动画时长

　　类型：[字符串，数字],

　　默认值：1000

　　},

　　延迟：{

　　//延迟多久执行

　　类型：[字符串，数字],

　　默认值：200

　　},

　　时间函数：{

　　//动画缓动函数

　　类型：字符串，

　　默认值："三次贝塞尔曲线(0.99,0.01,0.22,0.94)"

　　},

　　圆周宽度：{

　　//圆环宽度

　　类型：数量，

　　默认值：100,

　　},

　　颜色：{

　　//文字颜色

　　类型：字符串，

　　默认值： #000

　　},

　　fontSize: {

　　//文字大小

　　类型：字符串，

　　默认值：" 18px "

　　}

　　},

　　data() {

　　返回{

　　宽度：this.circleWidth，

　　idStr:` circle _ progress _ key frames _ $ { this。id }

　　};

　　},

　　销毁前(){

　　//清除旧组件的样式标签

　　文档。getelementbyid(这个。idstr)

　　文档。getelementbyid(这个。idstr).移除();

　　窗户。addevent侦听器(()={ })；

　　},

　　已安装(){

　　让自我=这个；

　　这个。setcirclewidth()；

　　这个。设置动画()；

　　//此处不能使用window.onresize

　　window.addEventListener(

　　调整大小，

　　去抖(函数(){

　　自我。setcirclewidth()；

　　自我。设置动画(自我)；

　　}, 300)

　　);

　　},

　　方法：{

　　setCircleWidth() {

　　让box=this .$ refs.box

　　let width=box.clientWidth

　　let height=box.clientHeight

　　设cW=宽度高度？高度：宽度；

　　宽度=顺时针

　　},

　　setAnimation() {

　　让自我=这个；

　　if (self.isAnimation) {

　　//重复定义判断

　　如果(文档。getelementbyid(self。idstr)){

　　控制台。警告( vue-圆圈-进度不应有相同的编号样式);

　　文档。getelementbyid(self。idstr).移除();

　　}

　　//生成动画样式文件

　　让style=document。createelement( style )；

　　风格。id=自我。idstr

　　风格。type= text/CSS ；

　　style.innerHTML=`

　　@关键帧circle _ progress _ key frames _ name _ $ { self。id } {

　　从{笔画-破折号偏移量：$ {(self。宽度-自我。半径)* 3.14 } px}

　　to { stroke-dash offset:$ {((self . width-self . radius)*

　　3.14 *

　　(100 - self.progress)) /

　　100 } px}}。circle_progress_bar${

　　自我标识

　　} { animation:circle _ progress _ key frames _ name _ $ { self . id } $ {

　　自我持续时间

　　} ms $ { self . delay } ms $ { self . time function }转发；}`;

　　//添加新的样式文件

　　document . getelementsbytagname( head )[0]。appendChild(style)；

　　//向svg元素添加动画类

　　自我。$参考文献。$ bar . class list . add(` circle _ progress _ bar $ { self . id } `)；

　　}

　　}

　　}

　　};

　　/脚本

　　样式范围。内容{身高：100%；显示器：flexjustify-content:居中；对齐-项目：居中；}。center _ text { position:absolute；}

　　/风格

　　用法：

　　circle progress:id= circle 1 :circle width= 40 :radius= 7 :progress= 30 :is animation= true :background color= # e9e 9e 9 :bar color= # ff 4f 4f /

　　circle progress:id= circle 2 :circle width= 40 :radius= 7 :progress= 50 :is animation= true :background color= # e9e 9e 9 :bar color= # ff 902 a /

　　circle progress:id= circle 3 :circle width= 40 :radius= 7 :progress= 89 :is animation= true :background color= # e9e 9e 9 :bar color= # FFDB4F /

　　circle progress:id= circle 4 :circle width= 40 :radius= 7 :progress= 25 :is animation= true :background color= # e9e 9e 9 :bar color= # b8d 87e /

　　在使用的时候，需要注意的是，如果你在你的页面中同时使用两个以上这样的环形进度条，那么你需要为每个环形进度条设置不同的id。否则，所有环最终显示的数据将是最后一个环的数据。

　　代码中有一个图像稳定器的功能。下面是这个函数的一个粘贴：

　　功能去抖(func，wait，immediate) {

　　let超时，参数，上下文，时间戳，结果

　　const later=function () {

　　//根据上次触发的时间间隔

　　const last=new Date() -时间戳

　　//最后一次调用包装的函数时，间隔last小于设置的间隔wait。

　　if(最后等待最后0) {

　　timeout=setTimeout(稍后，wait - last)

　　}否则{

　　超时=空

　　//如果设置为immediate===true，这里就不需要调用了，因为开始边界已经被调用了。

　　如果(！立即){

　　result=func.apply(上下文，参数)

　　如果(！超时)context=args=null

　　}

　　}

　　}

　　本文指的是vue-circleprogressbar，它是npm上一个圆形进度条的插件。之所以不在项目中直接安装使用这个插件，是因为这个插件不符合我们开发的需要。比如这个插件不能设置圆的宽度，文本的颜色，或者文本的大小。再比如这个插件依赖lodash(这个lodash的体积还是很大的)只是为了防抖。

　　至于这个组件在react中的使用，根据react的生命周期，或者react hooks的语法，或者dva模式的语法，稍微改动一下就可以用了。很简单，就不再展开了。

　　作者：小坏蛋

　　资料来源：http://tnnyang.cnblogs.com

　　以上是Vue实现循环进度条的例子细节。更多关于Vue实现循环进度条的信息，请关注我们的其他相关文章！

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