Question

我在项目中使用了vue-slide-bar 2个位置。一个在页面上被调用的普通组件内部，另一个在引导模态内。除非我调整屏幕大小，否则引导模态内部的那个不会初始化。这是我的vue-slide-bar的代码。

 components: {
    VueSlideBar
  },

data() {
  return {
    sliderCustomzie: {
        lineHeight: 1,
        processStyle: { 
          backgroundColor: '#1FA0FB' 
        },
        tooltipStyles: { 
          backgroundColor: '#1FA0FB',
          borderColor: '#1FA0FB' 
        }
      },
      sliderWithLabel: {
        data: [
          1,
          2,
          8
        ],
        range: [
          {
            label: 'Poor'
          },
          {
            label: 'Fair',
            isHide: true
          },
          {
            label: 'Mint'
          }
        ],
        rangeValue: {}
      },

和.vue文件中的html

<vue-slide-bar ref="slider" v-model="sliderWithLabel.value"
                            :processStyle="sliderCustomzie.processStyle"
                            :lineHeight="sliderCustomzie.lineHeight"
                            :tooltipStyles="sliderCustomzie.tooltipStyles"
                            :data="sliderWithLabel.data"
                            :range="sliderWithLabel.range"
                            @callbackRange="callbackRange">
                    </vue-slide-bar>

Answer 1

在方法中使用它。

refreshSlide(){
  this.$refs.slider.refresh()
}

打开模态后调用它。问题在于它在模态实际打开之前就被初始化了。因此，我们需要在模式打开后对其进行初始化，这应该可以解决您的问题：）

Answer 2

在 "vue-carousel": "^0.18.0", 这对我有用：

$('#myModal').on('shown.bs.modal', function () {
    Vue.nextTick(() => window.dispatchEvent(new Event('resize')));
})

vue-slide-bar在引导模态中不起作用

2 个答案: