vant组件库progress进度条percentage超过100报错

已于 2022-04-24 10:43:10 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： vant 文章标签： 前端
于 2021-11-24 10:46:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Polohert/article/details/121510286
版权

在使用vant组件库的进度条插件的时候，percentage绑定值超过100的时候，会报一个错

实际开发当中，percentage的值一般都是从接口中获取的，只需要在绑定值的时候，写个三目判断一下，他的值是否大于100，大于100显示100，小于的话显示接口返的值即可

丶error
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序 进度条progress 根据不同的进度显示不同的渐变色
lurenlinshen的博客
05-06 933
微信小程序 进度条progress 根据不同的进度显示不同的渐变色
微信小程序学习(9)-progress进度条
热门推荐
sinat_36772813的博客
11-25 1万+
progress进度条控件： 主要用于一项任务的完成进度，例如：数据下载进度、视频播放进度、安装进度等。 1.控件参数 2.属性对控件的影响 show-info和active默认为false，如果为true的时候可以不写属性值，也可以写为active=“true”
vant 进度条progress最大值超出100处理
qq_44852817的博客
06-02 3179
项目场景：vant 进度条progress最大值超出 问题描述： 使用vantui做移动端进度条progress组件展示时，进度超过100%，一时不知道如何是好，该样式也没有成功，最后用了一个很简单的方法解决，瞬间留下了菜鸡的眼泪！！ //这是vant的progress组件应用 <van-progress :percentage="progressVal" :pivot-text="`${progressText}%`" stroke-
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
1. vant 介绍 ### 扫码体验 Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包，详见npm 支持 # npm npm i vant-weapp -S --production # yarn yarn add vant-weapp --production 方式
关于vant组件中van-progress的Invalid prop: custom validator check failed for prop “percentage“报错
thirteen_king13的博客
03-18 1333
在 vue 移动端项目中使用 vant 组件中的进度条 出现如下报错 虽然在使用中并未发现影响，且进入条也会正常步进。 为了解决这个报错，可以在<van-progress></van-progress> 中添加一个判断条件 控制该元素的显示与隐藏，来解决报错的问题。 v-if="!isNaN(parseInt(percentage))" 添加之后将不再报错。 <van-progress :percentage="currentPercentage" v-if="!is
vant ui progress进度条组件样式调整
qq_41421033的博客
02-01 2449
组件api: pivot-text- 进度文字内容 string 百分比。区分效果一没有用flex布局, 用了定位样式。这里把pivot-text的值设置为空。效果二是文字在进度条内部。
设置 ProgressBar 进度条（条形） 的颜色和用代码动态控制显示的长度
杰森丶郭达斯坦森的博客
08-19 7392
第一步写入progressbar这个控件 然后再写progressbar.xml文件
微信小程序进度条详解 progress 自定圆形进度条
代码小疯子
12-06 7352
在微信小程序开发中，progress用来实现水平进度条效果
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.2 progress组件，以及如何自定义实现一个环形进度条？
weixin_42580704的博客
07-12 850
在前端网络操作是异步的，一般都需要一个进度条，在很多应用中，我们经常可以看到环形进度条。 但是小程序原生的progress组件，是一个从左到右的方形进度条，那么我们可不可以自实现一个环形进度条呢？ 一、原生实例代码 可自定义的属性有关于颜色值的，颜色的使用需要符合微信小程序设计规范 https://developers.weixin.qq.com/miniprogram/design/ index.wxml <!-- 单击模拟网络异步 --> <view class="gap" &
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van-list :finished
vant 自定义 van-dropdown-item的用法
10-15
主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vant移动端组件库-其他
06-11
Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。特性：1、60+ 高质量组件2、95% 单元测试覆盖率3、完善的中英文文档和示例4、支持按需引入5、支持主题定制6、支持...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 ...
Vant van-progress 标签使用
grootbaby
11-03 3639
<van-popup v-model="showProcess" round :close-on-popstate="true" :close-on-click-overlay="false" > <p>上传中...</p> <van-progress :percentage="progressValue" :show-pivot="false" color="#1E90FF" track-color=".
小程序组件 progress 的原生样式修改
qinnzheng
08-23 579
小程序组件 progress
微信小程序的vant rate组件半星展示不完整
qq_44559185的博客
10-27 550
【代码】微信小程序的vant rate组件半星展示不完整。
element-UI中progress中percentage进度条数值显示问题
最新发布
小码农
09-25 1369
element-UI中progress进度条的数值问题
Element Progress组件 percentage值大于100时控制台报错
crazybai0001的博客
11-29 1923
问题 Progress组件的percentage值大于100时，浏览器控制台出现报错信息，请看下图： 原因 percentage值的类型要求是数值型，且其取值范围是[0,100]，但有时真实的业务场景下，这个值可能会大于100，所以会出现上面的报错信息，下图是Progress组件关于percentage的说明： 解决方法 解决此问题的思路如下： 判断接口返回的percentage值，如果大于100，则将其设置为100，否则保持原值； 使用format设置进度条右侧文本内容，使其..
uniapp中引入vant组件库时报错
06-10
可以先检查以下问题： 1. 是否已经安装了vant组件库。可以使用npm或yarn安装vant组件库。 2. 是否在App.vue中引入了vant组件库。可以在App.vue中添加以下代码： ``` import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` 3. 是否在pages.json或globalStyle中引入了vant组件库的样式文件。可以在globalStyle中添加以下代码： ``` "@import": [ "path/to/vant.css" ] ``` 如果还是无法解决问题，请提供具体的错误信息或代码片段，以便更好地帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值