如何使用 vue 将自定义 html 注入特定类答案

【问题标题】：How to inject custom html into a specific class with vue如何使用 vue 将自定义 html 注入特定类
【发布时间】：2021-09-24 10:04:24
【问题描述】：

我有一个需求，比如我想将一些自定义 HTML 内容注入到现有类 slider-piecewise

插件制造商的piecewise 插槽存在错误，所以我想注入一些 HTML

我想将下面的 HTML 注入到ul.slider-piecewise

<li><img src="http://placehold.it/60x60"/><p>Argentina</p></li>

new Vue({
  data() {
    return {
      value: [0,100]
    }
  },
  created() {
    this.min = 0
    this.max = 250
    this.enableCross = false
  },
  methods:{
     sliding(steps){
       console.log('steps',steps);
    }
  },
}).$mount('#app')

* {
  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;}

<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">
    <vue-range-slider v-model="value" :min="min" :max="max" :step="0.1" :enable-cross="enableCross" @slide-end="sliding($event)">
    
      <div class="diy-tooltip" slot="piecewise" >
          
         <li><img src="http://placehold.it/60x60"/><p>Argentina</p></li>
        <li><img src="http://placehold.it/60x60"/><p>Brazil</p></li>
        
      </div>
      
    </vue-range-slider>
  </div>
</div>

插件链接（本人使用）：https://github.com/xwpongithub/vue-range-slider

【问题讨论】：

旁注：将step 属性更改为:step 以确保0.1 以数字形式发送（Vue 抛出Invalid prop 错误）。
使用@Philip 解决方案，我可以将类似的东西注入到适当的地方，现在问题是li 可以在这里看到多次附加ibb.co/kcX2rpC
似乎分段的东西应该制作多个项目，比如刻度/图表上的刻度线，对吧？所以我认为这是正确的行为。无论如何，这是另一个最好针对插件制造商的问题。

标签： javascript vue.js vue-component

【解决方案1】：

将:piecewise="true" 添加到<vue-rang-slider> 标记以启用它。

在documentation 中查看属性piecewise。

【讨论】：

成功了！！！但附加li 多次看到这里ibb.co/kcX2rpC
我不太了解这个插件，所以不确定这是否正常。
很好用！不要忘记将问题标记为已回答。