范围(Range)

Quasar Range组件是向用户提供最小值和最大值之间的子范围选择的好方法。它有选择这些值的可选的步骤。 范围组件的一个例子是提供价格范围选择。

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

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QRange']
}

基本用法

请注意，我们正在使用一个对象作为选择对象，该对象为所选范围的较低值（“rangeValues.min”）和较高值（“rangeValues.max”）的值。

<template>
  <q-range
    v-model="rangeValues"
    :min="0"
    :max="10"
    :step="1"
  />
</template>

<script>
export default {
  data () {
    return {
      // 我们的模型
      rangeValues: {
        min: 2,
        max: 4
      }
    }
  }
}
</script>

使用step、 label and snap的例子:

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

Vue属性

支持v-model，它应该绑定到范围内的对象，使用“min”和“max”属性。

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

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

着色

使用color属性，设为Quasar调色板中的一种Quasar颜色，如primary，secondary，orange-9，teal-4：

<q-range
  color="teal"
  v-model="rangeValues"
  :min="0"
  :max="50"
  label
/>

懒惰输入

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

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

拖动范围

使用drag-range or drag-only-range的属性，以允许用户移动选定范围或整个预定范围。

<q-range drag-range v-model="rangeValues" :min="0" :max="100" label />

<q-range drag-only-range v-model="rangeValues" :min="0" :max="100" label />

添加标记

使用markers属性来显示可用于范围选择的步骤。

<q-range markers v-model="rangeValues" :min="-6" :max="10" :step="2" label snap  />

覆盖标签

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

<q-range
  v-model="model"
  :min="-20" :max="20"
  :left-label-value="`${model.min}px`"
  :right-label-value="`${model.max}px`"
/>

Vue活动

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

列表中的用法

<q-list>
  <q-item>
    <q-item-side icon="local_atm" />
    <q-item-main>
      <q-range v-model="standalone" :min="0" :max="50" label />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="euro symbol" />
    <q-item-main>
      <q-range v-model="standalone" :min="0" :max="50" label />
    </q-item-main>
  </q-item>
</q-list>
滑块 单选框