最近在保护基于vux UI的挪动我的项目中应用vux的range组件发现两个坑。在网上搜不到解决办法(可能应用人员比拟少)的状况下钻研这个组件源码解决我所遇到的两个问题。

问题一:
间接援用range组件呈现原点拖动不了的状况。

解决方案:
1、在range组件的外层加v-if。(重点说这个) 2、查看元素层级关系

问题二:
批改绑定在range组件的V-model的data数字会呈现没法累加的状况。目前呈现23过渡24的时候没主动变回23。 71过渡72的时候会主动变回71。

解决方案:
在range组件中设置:step='0.5' 当然这个不是最好的解决方案是用来躲避vux内置办法中计算问题。

没趣味能够跳过以下剖析源码中呈现问题的起因:
问题一:

具体的思路我就不细说了关键问题的源码:

打印进去的后果是这个元素的宽度获取到的是auto。所以导致range写的计算方法出错导致拖动不了。就是说进入range 初始化时该元素宽度有问题 (我这里是因为range嵌套在 vux diolog组件导致的)

在外层加上v-if 保障我外层diolog呈现当前再加载rang进行初始化。 问题解决

问题二
点击加号将range的百分数+1。发现到23的时候死活加不下来。

起初用最原始办法,console打印法找到问题的点呈现在哪里,先说论断:**问题呈现在vux里封装滑动条滑动间隔占总间隔百分比的办法里。 23-过渡到 24的计算结果是23.49145299145299 取整后又变回23。所以数字