NightCatSama/vue-slider-component

dots' style class was reset somewhere after touchend event

Amengka opened this issue · 1 comments

Describe the bug

When you are controling the slider on a tablet, as the finger leaves

哈喽,问题是这样的,通常来讲当我拖动完一个滑块的时候,滑块会保持focus的状态(这也是我希望保持的状态),同时该滑块的css class变为.vue-slider-dot .vue-slider-dot-focus。可当我在平板电脑上执行同样的操作时,当我的手指离开触控屏,滑块样式会被重置为初始状态,只有.vue-slider-dot这一个class而没有.vue-slider-dot-focus。我曾尝试过手动覆盖touchend事件方法但没有解决问题。
该问题应该可以通过在操作文档网站上使用chrome device mode的方式来简单复现,所以这里就不放在线代码了

Generally speaking, when I finish moving a handle on the slider, the handle that I moved will be focused(which is eactly what I want) and its css style classList will be .vue-slider-dot .vue-slider-dot-focus. But when I am doing the same thing on a tablet, as my finger left the screen, the handle's style will reset and there was only .vue-slider-dot remained in the classList. I tried to override the touchend event but it did not help.

Example code will not be presented, as you can easily reconstruct the scenario by using chrome device mode on the documentation webside.

Any help will be appreciated, thank you!

Environment (If you feel unrelated, please delete the block)

  • OS & Version: ubuntu v18.04
  • Vue version: v2.6.10
  • Component Version: v3.2.15

拖拽完后保留 Focus 状态设计上是为了 useKeyboard 也就是键盘控制使用的,所以在移动端上默认就没开这个功能。

不过你也可以通过在 @drag-end 的回调上手动去设置 $refs.slider.states.add(4) 去强制开启 Focus 状态。