Vue动态计算百分比配合vux插件

1、首先进入vux官网中引入插件

XProgress 组件使用教程 | VUX - 基于 WeUI 和 Vue 的移动端组件库https://doc.vux.li/zh-CN/components/x-progress.html

也可以引入其他进度条框架

2、由官网显示，进度条的范围是0-100

这时候就需要我们动态获取内容并计算啦

   

<x-progress :percent="gteProgress(myord.serviceTimes,myord.svcday)" :show-cancel="false"></x-progress>

 

 // 服务进度的转换
    gteProgress(val1,val2){
      console.log(val1,'服务进度haha',val2,'服务天数');
      if (val1 == 0 || val2 == 0) {
        return 0
      }
      return (Math.round(val1/val2 * 10000) /100.00)
    },

 3、这个时候转化就已经完成了，记得在获取接口的时候就调取这个方法获取相应的值哦。

如果有更好的方法欢迎大家评论留言。