Vue中如何向slider-piecewise类元素注入自定义HTML内容

你可以在Vue组件挂载完成、插件渲染出对应的DOM节点后，手动操作DOM注入自定义HTML，具体步骤如下：

• 给vue-range-slider组件添加ref标识，方便获取其内部DOM
• 在mounted生命周期钩子中使用$nextTick，确保插件已经完成自身DOM渲染，再定位到ul.slider-piecewise元素注入内容
• 如果你的自定义内容需要动态更新，可在对应数据变更后重新执行注入逻辑

完整代码示例 #

JS 部分 #

new Vue({
  data() {
    return {
      value: [0,100],
      customList: [
        {img: 'http://placehold.it/60x60', name: 'Argentina'},
        {img: 'http://placehold.it/60x60', name: 'Brazil'}
      ]
    }
  },
  created() {
    this.min = 0
    this.max = 250
    this.enableCross = false
  },
  mounted() {
    this.$nextTick(() => {
      // 定位到目标ul元素
      const sliderPiecewise = this.$refs.rangeSlider.$el.querySelector('ul.slider-piecewise')
      if (!sliderPiecewise) return
      // 拼接自定义HTML
      let htmlStr = ''
      this.customList.forEach(item => {
        htmlStr += `<li><img src="${item.img}"/><p>${item.name}</p></li>`
      })
      // 可根据需求选择覆盖原有内容/追加内容
      sliderPiecewise.innerHTML = htmlStr
    })
  },
  methods:{
     sliding(steps){
       console.log('steps',steps);
       // 若交互后注入内容丢失，可在此处重新调用注入逻辑
    }
  },
}).$mount('#app')

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vue-range-component@1.0.2/dist/vue-range-slider.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-range-component@1.0.2/dist/vue-range-slider.min.js"></script>

<div id="app">
  <div class="app-content">
    <!-- 新增ref属性 -->
    <vue-range-slider ref="rangeSlider" v-model="value" :min="min" :max="max" :step="0.1" :enable-cross="enableCross" @slide-end="sliding($event)">
    </vue-range-slider>
  </div>
</div>

CSS 部分 #

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
   --slider-color:#2196f3;
}

.app-content {
  padding:40px 15px;
}

.slider{
    height:150px !important;
}

.slider-always{
  width: 5px !important;
  height: 100% !important;
  cursor: w-resize !important;
  left: 5px !important;
  background: #2196f3 !important;
  top:0 !important;
}

.slider-process{
    border-radius: 0 !important;
    background-color: #ffffff !important;
}

.slider-process:before,.slider-process:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--slider-color);
}
.slider-process:before{top:0}
.slider-process:after{bottom:0}

.slider-dot{border-radius:0 !important; box-shadow:none !important;}

注意事项 #

如果滑块交互过程中插件会重新渲染ul.slider-piecewise元素导致注入内容丢失，在slide-end等对应事件回调中重新执行注入逻辑即可。

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