我正在使用vueSlider。
查看下面链接的示例,我认为只能设置 min 和 max 中的整数。
<vue-slider
ref="slider"
v-model="value"
min="0"
max="100"
但我想设置一个不是整数的范围。例如,我想在范围内设置从 30 秒到 1:30 分钟的值。
有没有办法在 vue-slider 中实现类似上面的例子?
如果不能,请让我知道您是否有其他选择。
感谢您阅读我的问题。
我正在使用vueSlider。
查看下面链接的示例,我认为只能设置 min 和 max 中的整数。
<vue-slider
ref="slider"
v-model="value"
min="0"
max="100"
但我想设置一个不是整数的范围。例如,我想在范围内设置从 30 秒到 1:30 分钟的值。
有没有办法在 vue-slider 中实现类似上面的例子?
如果不能,请让我知道您是否有其他选择。
感谢您阅读我的问题。
如果您想在第二次显示 vue-slider 值,可以使用格式化程序:
<vue-slider
ref="slider"
v-model="value"
v-bind="options"
:min="15"
:max="360"
:interval= "1"
:tooltip="'always'"
:tooltip-formatter="Tformatter"
>
</vue-slider>
new Vue( {
el: '#app',
data () {
return {
value: 15,
Tformatter: val => {
let min = Math.floor(val/60);
let sec = val%60 > 9 ? val%60 : "0"+val%60;
return min+':'+sec;
}
}
},
这里更新了您的示例:https ://jsfiddle.net/d1qwx3gv/
是的,你可以做到
删除 min 和 max 你不需要它们
您需要使用的是 :data 属性,它可以采用一组值(数字或字符串等)
一个小的实现是这样的
前任
<div id="app">
<vue-slider :data="datas" v-model="vvalue" :marks="true"></vue-slider>
</div>
new Vue({
el: '#app',
data:{
message:'hi there',
vvalue:'30',
datas:['30','45','1:00','1:30']
},
components: {
VueSlider: window['vue-slider-component']
}
})
你也可以在这里查看一个工作示例 https://jsfiddle.net/9ejrwz2t/1/