滑块

Quasar Slider是让用户在最小值和最大值之间指定一个数值的好方法。它也有在有效值之间的可选的步骤。

还要查看其“兄弟”，即Range组件。
请记住，您也可以使用由QField封装的QSlider。

对于辅助函数、错误消息占位符等许多其他功能，可与QField很好地协作。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QSlider']
}

基本用法

<q-slider v-model="selectedValue" :min="1" :max="7" />

使用 step、 label 和 snap例子:

<q-slider
  v-model="selectedValue"
  :min="0"
  :max="10"
  :step="2"
  label
  snap
/>

方形滑块按钮示例：

<q-slider
  v-model="selectedValue"
  :min="0"
  :max="10"
  square
/>

Vue属性

支持v-model，它应该绑定到范围内的数字。

Vue属性 类型 说明
min 数字 模型的最小值。默认值是1.
max 数字 模型的最大值。默认值是5.
label 布尔 弹出一个标签，当用户点击/轻按范围并移动它时。
label-always 布尔 始终显示标签。
label-value 字符串 覆盖默认标签值。
fill-handle-always 布尔 即使处于最小值，也可以填充手柄。
step 数字 指定有效值之间的步长数量。
decimals 数字 指定最大小数位数。
snap 布尔 范围处理程序将捕获值，而不是自由滑动;能和step很好地结合使用;还会在范围中显示步骤标记。
marker 布尔 在背景上显示标记，为模型的每个可能值分配一个标记。
square 布尔 设为’true’时滑块按钮是正方形而不是圆形。
color 字符串 Quasar调色板之一。
error 布尔 如果设置为“true”，则滑块变成红色。
warning 布尔 如果设置为“true”，则滑块变成黄色。
readonly 布尔 如果设置为“true”，则用户不能更改模型值。
disable 布尔 如果设置为“true”，则用户不能更改模型值。

重要
确保正确选择min、max和step值。 step必须是max - min的除数，否则组件将无法正常工作。这是因为所有有效的步骤必须能够在min和max值内保持相同的位置。

覆盖标签

在下面的例子中，我们为标签添加一个“px”后缀。

<q-slider
  v-model="model"
  label-always
  :min="-20" :max="20"
  :label-value="`${model}px`"
/>

懒惰输入

Vue很快会为组件上的v-model提供.lazy修饰符，但在此之前，您可以使用更长的等效形式：

<q-slider
  :value="model"
  @change="val => { model = val }"
  :min="0" :max="20"
/>

着色

使用Color属性设置调色板中的一种Quasar颜色，例如primary，secondary，orange-8，teal-4:

<q-slider
  color="orange"
  v-model="standalone"
  :min="0"
  :max="50"
  label
/>

Vue事件

Vue事件 说明
@input(newVal) 模型值更改时立即触发。
@change(newVal) 模型值延迟更改时触发。

列表中的用法

<q-list>
  <q-item>
    <q-item-side icon="volume_up" />
    <q-item-main>
      <q-slider v-model="standalone" :min="0" :max="50" label />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="brightness_medium" />
    <q-item-main>
      <q-slider v-model="standalone" :min="0" :max="50" label />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="mic" />
    <q-item-main>
      <q-slider v-model="standalone" :min="0" :max="50" label />
    </q-item-main>
  </q-item>
</q-list>
搜索 范围