嗨,我正在使用带有插槽的https://github.com/xwpongithub/vue-range-slider 插件piecewise
插槽内的任何内容都会piecewise
多次附加
如下图所示
这是我的代码
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)" :piecewise="true">
<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>