1

我正在使用vueSlider

查看下面链接的示例,我认为只能设置 min 和 max 中的整数。

<vue-slider
ref="slider"
v-model="value"
min="0"
max="100"

例子

但我想设置一个不是整数的范围。例如,我想在范围内设置从 30 秒到 1:30 分钟的值。

有没有办法在 vue-slider 中实现类似上面的例子?

如果不能,请让我知道您是否有其他选择。

感谢您阅读我的问题。

4

2 回答 2

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/

于 2020-10-16T20:22:35.627 回答
1

是的,你可以做到

删除 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/

于 2020-10-16T20:14:12.550 回答