vue2前端中vant2中的唤醒组件van-circle掉坑

最新推荐文章于 2024-03-29 22:15:00 发布

cv酱

最新推荐文章于 2024-03-29 22:15:00 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签：前端 java javascript

本文链接：https://blog.csdn.net/YingUser/article/details/126587136

版权

本文介绍了在Vue2项目中使用Vant2的van-circle组件时遇到的问题，即修改rate属性影响所有实例。通过分析官方文档，发现v-model的实时监测导致了组件间的相互影响。解决办法是确保每个van-circle组件的currentRate绑定值独立，避免复用同一个变量，从而实现各自独立的进度控制。

摘要由CSDN通过智能技术生成

1、官网上的原话：

rate 属性表示进度条的目标进度，v-model 表示动画过程中的实时进度。当 rate 发生变化时，v-model 会以 speed 的速度变化，直至达到 rate 设定的值。

此时我要做五个环形，无论怎么改变这个rate的数值都会影响前面的第一个环形，

原来的错误写法：

<div class="circle">
                            <div class="circle1">
                                <van-circle v-model="currentRate" :rate="80" :speed="100" text="0个" :stroke-width="40"
                                    layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle2">
                                <van-circle v-model="currentRate" :rate="30" :speed="100" text="0个" color=