关于bootstrap-vue和vue-slider-component的问题

Question

点击打开b-mobal框后滑动条不能正确显示也不能拖动，要改变一下浏览器大小才能正常使用

这是代码：

<b-btn v-b-modal.modal>打开</b-btn>

<b-modal id="modal" title="Bootstrap-Vue">
  <vue-slider class="mt-5" value="40"></vue-slider>
</b-modal>

点击按钮打开：

点拖动不能移动，但是数值会变，然后改变一下浏览器大小才能正常使用
应该跟resize事件有关，但是我解决不了

有什么办法能够直接打开就能使用？

这里是bootstrap-vue插件demo

Answer 1

我也有这个问题，。怎么搞好

Answer 2

我也是，怎么搞啊

Answer 3

if the component initialization in a v-show="false" / display: none container or use transform / animation / margin to change the location of the component, there may be an exception ( The slider cannot be used, because the component can not initialize the size or slider position ).

The solution:

using v-if instead of v-show or display: none.
use prop show to control display.
After the component appears, to call the refresh method.
Example: https://jsfiddle.net/2xy72dod...