为什么vue-range-component在Vuejs的sweet-modal中无法正常工作

vue-range-component 范围滑块在初始化挂载阶段，会读取父容器的实际渲染宽度，以此计算滑块轨道、拖拽手柄的尺寸与定位。
sweet-modal 弹窗默认初始为隐藏状态（display: none），此时弹窗内部的DOM元素不占据实际布局空间，宽度计算值为0；如果滑块在弹窗隐藏阶段就完成了挂载初始化，等弹窗打开显示后，滑块不会自动重新计算尺寸，就会出现轨道错位、手柄显示异常的问题，和描述中的故障表现完全匹配。

• 延迟挂载滑块：等弹窗完全打开、所有入场动画执行结束，DOM尺寸计算正常后再渲染滑块组件。通过sweet-modal提供的@opened（弹窗完全打开触发）事件控制滑块的渲染状态，示例代码：

<template>
  <sweet-modal @opened="isModalOpened = true">
    <vue-range-slider
      v-if="isModalOpened"
      v-model="value1"
      :min="min1"
      :max="max1"
    />
  </sweet-modal>
</template>
<script>
import VueRangeSlider from 'vue-range-component'
export default {
  components: { VueRangeSlider },
  data() {
    return {
      isModalOpened: false,
      value1: 30,
      min1: 0,
      max1: 100
    }
  }
}
</script>

• 手动触发滑块重绘：如果不想通过v-if销毁重建组件，可以给滑块设置ref，在弹窗完全打开的回调中，通过$nextTick调用滑块的resize方法重新计算尺寸：

// sweet-modal的opened事件回调中执行
handleModalOpened() {
  this.$nextTick(() => {
    this.$refs.rangeSlider.resize()
    // 如果当前组件版本没有暴露resize方法，可直接给滑块绑定动态key，弹窗打开时更新key强制组件重刷
  })
}

• 绑定动态key强制重渲染：直接将滑块的key值和弹窗的显示状态绑定，弹窗状态切换时key变化会触发组件重新挂载，代码更简洁：

<vue-range-slider
  :key="modalVisible"
  v-model="value1"
  :min="min1"
  :max="max1"
/>

注意：不要在弹窗隐藏、入场动画未执行完成的阶段初始化滑块，此时容器宽度计算值不准确，依然会出现显示异常。

内容的提问来源于stack exchange，提问作者kamran shirazi