如何解决如何在vue-slider中设置没有最大值的范围
我正在使用vueSlider。
通过下面的示例链接,我认为只能设置min和max中的整数。
<vue-slider
ref="slider"
v-model="value"
min="0"
max="100"
但是我想设置一个不是整数的范围。 例如,我要将值从30秒设置为1:30分钟。
有没有一种方法可以在vue-slider中实现上述示例?
如果无法解决,请告诉我是否有其他选择。
感谢您阅读我的问题。
解决方法
是的你可以做到
删除最小和最大,您将不需要它们
您需要使用的是:data属性,该属性可以采用值数组 (数字或字符串等)
一个小实现就是这样
e.x。
<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/
,如果要在第二秒显示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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。