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(
·
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、这个时候转化就已经完成了,记得在获取接口的时候就调取这个方法获取相应的值哦。
如果有更好的方法欢迎大家评论留言。
更多推荐
已为社区贡献5条内容
所有评论(0)