范围(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>

使用steplabel 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’时,用户只能拖动预定的范围。范围限制值不能单独更改。

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

着色

使用color属性,设为Quasar调色板中的一种Quasar颜色,如primarysecondaryorange-9teal-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>