最近在维护基于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内置方法中计算问题。

没兴趣可以跳过以下分析源码中出现问题的原因:
问题一:

详细的思路我就不细说了关键问题的源码:
image.png

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

image.png

在外层加上v-if 保障我外层diolog出现以后再加载rang进行初始化。 问题解决
image.png

问题二
点击加号将range的百分数+1。发现到23的时候死活加不上去。
image.png

后来用最原始方法,console打印法找到问题的点出现在哪里,先说结论:**问题出现在vux里封装滑动条滑动距离占总距离百分比的方法里。 23-过渡到 24的计算结果是23.49145299145299 取整后又变回23。所以数字image.png

image.png

image.png


嘉豪
29 声望0 粉丝