记录Vant circle 踩坑

最新推荐文章于 2024-03-29 22:15:00 发布
最新推荐文章于 2024-03-29 22:15:00 发布
阅读量5.1k 收藏 6
点赞数 4
分类专栏： vant 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43822134/article/details/108623730
版权
最近这家公司的一款app用的Vant-UI，说实话之前并没怎么接触过Vant，在开发的过程中踩了不少没经验的坑。其他的都还好，坑最多的其中必须要有circle的名号。circle-环形进度条在官方文档里只有部分API的例子，而且对于部分最常用的API的介绍并不很详细，比如v-model、rate。其中文档中给出 v-model 为当前进度，rate为目标进度而与此同时官网给的例子就让人看不懂了。此时v-model为0，rate为30，但进度条显示为70%没办法，自己写代码自己试，发现自己写也
摘要由CSDN通过智能技术生成

最近这家公司的一款app用的Vant-UI，说实话之前并没怎么接触过Vant，在开发的过程中踩了不少没经验的坑。其他的都还好，坑最多的其中必须要有circle的名号。

circle-环形进度条
在官方文档里只有部分API的例子，而且对于部分最常用的API的介绍并不很详细，比如v-model、rate。

官方API
其中文档中给出 v-model 为当前进度，rate为目标进度
而与此同时官网给的例子就让人看不懂了。
在这里插入图片描述
此时v-model为0，rate为30，但进度条显示为70%

没办法，自己写代码自己试，发现自己写也是这个情况。

怎么读文档也不知道为什么v-model

最低0.47元/天 解锁文章
JayceM
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
van-Circle 环形进度条
无知者无畏
03-09 4054
van-Circle 环形进度条 涉及的功能点： 圆形进度条：文本自定义样式大小 颜色定制、大小定制、渐变色、宽度定制 模拟断点续传 <template> <div class="demo"> <div class="syn_data fcc pt20"> <van-circle class="syn_circle" v-model="currentRate" :rate="rate
vue2前端中vant2中的唤醒组件van-circle掉坑
YingUser的博客
08-29 1856
前端 vant2 组件的环形组件掉坑
记录Vant circle注意事项
weixin_44446394的博客
07-26 1256
circle-环形进度条 因为项目需要，在同一个页面需要显示不同的进度条，开始按照文档写的时候，是怎么都是同步的，后来边做边测试。最终实现效果，二话不说，上代码。没有上全，只是一部分,这里我有一个数据循环，因为太长了，没有写出来，answerItem.answerAgreeCount 这个就是循环的那个数据，且currentRate[answerindex] 这个值是在循环的里面加进去的，这里是关键，注意了，这里虽然是动态绑定的v-model，但是这里不能加：！！！！，这是真的坑，动态绑定的数据，不能加：也
进度条没法显示的问题
xqy3177563的博客
05-12 1093
自定义一个圆形进度条，结果发现圆形进度条没有出现，应该是ondraw()方法出了问题。 我把这里的两个int值强转成float后，进度条就出来了。
Vant 组件中的 Circle 环形进度条
Love_Fish_Young的博客
08-12 4414
Vant 组件中的 circle 环形进度条，进度条随时间增加动态变化
vant Circle 环形进度条写一个倒计时组件
最新发布
HDdgut的博客
03-29 496
【代码】vant Circle 环形进度条写一个倒计时组件。
vant Circle 多个环形进度条目标进度rate相同
一蓑烟雨任平生的博客
03-01 1874
问题描述： vant Circle 多个环形进度条目标进度rate相同 解决方案： 多个环形进度条的v-model 不能为同一值 <li class="progress_lenbar"> <van-circle v-model="currentRate0" :rate="70" :speed="80"
Vant2 van-circle自定义文字内容？
SM_Cute的博客
06-20 919
Vant2 van-circle自定义文字内容？
vant 组件的（circle）兼容性问题
yongyafang123的博客
03-31 3927
本来要写一个音频播放的倒计时圆圈⭕️动效；很庆幸，vant里面有提供！贼开心 然后就算音频时间，对应圆圈转动速度，很完美的写完了！可是第二天测试人员给我反馈说，iOS11的手机进度圆圈错位了！ what 什么鬼 为什么为什么 这也没有什么的单独设置啊 结果一顿百度啊！最终找到了答案 谁能想到和全局设置字体样式有关， postcss-pxtorem 在node_modules —— p...
Vant 环形进度条Canvas 层级问题
Florenza的博客
12-15 1022
【代码】Vant 环形进度条Canvas 层级问题。
vant-开发设计学习记录
01-16
本学习记录将深入探讨 Vant 的核心概念、组件使用以及开发实践。 首先，Vant 提供了丰富的组件库，包括导航（Tabbar、Steps、Swipe）、表单（Input、Checkbox、Radio）、展示（Cell、Image、Popup）、布局（Grid、...
微信小程序npm引入vant-weapp的踩坑记录
12-01
微信小程序项目使用npm安装vant-weapp的正确步骤  使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装...
vant侧边导航栏SideBar
07-03
Vant侧边导航栏（SideBar）是Vue.js框架中Vant UI库的一个重要组件，尤其在构建响应式布局和移动应用时非常常见。Vant是滴滴出行开发的一套轻量级、高度可定制化的移动端UI组件库，它旨在提供一套简洁、易用且高效的...
vantweapp源代码
01-25
Vant WeApp是一款基于微信小程序开发的UI组件库，它为开发者提供了丰富的UI组件，用于构建优雅、高效的小程序界面。Vant WeApp源自Vant，一个由有赞公司开发的轻量级移动UI组件库，它在移动端有着广泛的应用。Vant ...
circle vant3环形组件
weixin_42777161的博客
11-15 90
<template> <div class="circle-page1"> <van-circle :id="id" class="circle-box" v-model:current-rate="currentRate" layer-color="rgba(212,214...
使用Vant按需加载UI的时候报错：Unknown custom element 解决方案
热门推荐
qq_39740660的博客
10-17 1万+
使用Vant去按需加载UI的时候报错： vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <van-button> - did you register the component correctly? - For recursive components, make sure to provide ...
微信小程序爬坑记录
weixin_46166095的博客
03-16 433
微信小程序爬坑记录 开发微信小程序近两个月的小白，简单记录一下记忆比较深刻的坑 一 固定定位fixed scroll-view下不能通过fixed进行固定定位，无法到达页面底部，使用view即可。 二 canvas 业务中需要实现这样一个效果 vantWeapp 中有一个Circle 环形进度条的组件 大家需要注意的是size默认单位为px 而不是rpx 也就是说不可以自适应 需要通过 wx.getSystemInfoSync().windowWidth获取设备宽度后根据当前宽度得出一个系数实现自适应
如何清除vant van-cascader 历史选择记录
09-14
### 回答1： Vant 组件库中的 van-cascader 组件通常是用于显示级联选择框，如果你希望清除它的历史选择记录，可以在使用 van-cascader 组件时动态设置其 value 属性： ``` <van-cascader :value="[]" /> ``` 这样可以将选择值清空为空数组，从而清除历史选择记录。 ### 回答2： 要清除vant van-cascader的历史选择记录，需要进行以下步骤： 1. 找到van-cascader组件所在的父组件。一般来说，van-cascader是在一个表单或者可编辑的页面中使用的，所以可以定位到对应的表单组件或页面组件。 2. 在父组件的data中添加一个变量，用来保存van-cascader的选择值。 3. 在父组件的methods中添加一个方法，用来处理清除历史选择的逻辑。可以命名为clearCascaderHistory()。 4. 在clearCascaderHistory()方法中，将van-cascader的选择值设置为初始状态或空值，即将父组件data中保存的变量重置为初始值或空值。 5. 在van-cascader组件中，通过v-model绑定选择值的变量，将其与父组件data中的变量保持同步。 6. 在van-cascader组件的props中添加一个属性，例如need-clear-history，用来指定是否需要清除历史选择记录。 7. 在父组件中使用van-cascader时，根据需求设置need-clear-history属性。当需要清除历史选择记录时，将need-clear-history设置为true；否则，设置为false或不设置，默认为false。 8. 在父组件的watch中监听need-clear-history的变化，当need-clear-history变为true时，调用clearCascaderHistory()方法清除历史选择记录。 通过以上步骤，就可以实现清除vant van-cascader的历史选择记录。在需要清除记录的时候，设置相应的属性即可清除历史选择。 ### 回答3： 要清除vant van-cascader的历史选择记录，可以按照以下步骤进行操作： 1. 找到vant van-cascader组件所在的代码文件。一般来说，该组件会被引入到一个Vue组件中。 2. 在该Vue组件中，找到使用vant van-cascader的地方。一般会有一个包含vant van-cascader的template标签。 3. 在template标签中，找到vant van-cascader的属性列表，并查看是否有与历史选择记录相关的属性。通常，vant van-cascader会提供一个名为"clearable"或"clearable"的属性来控制是否可以清除历史选择记录。 4. 如果存在"clearable"或"clearable"属性，将其设置为true，以允许清除历史选择记录。例如： <van-cascader :clearable="true"></van-cascader> 5. 保存文件并重新加载应用程序。现在，用户在使用vant van-cascader组件时，将会看到一个清除按钮。点击该按钮即可清除历史选择记录。 如果以上步骤无法清除历史选择记录，可能需要进一步查看vant van-cascader组件的文档或查看相关代码，以确定是否有其他特殊属性或方法可以清除历史选择记录。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值