旋钮（Knob)

Quasar旋钮是使用户从预定范围中选择数值的另一种方法。 包含可选步骤。 请看演示。

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QKnob']
}

基本用法

<q-knob
  v-model="model"
  :min="min"
  :max="max"
/>

<!-- 用自定义占位符 -->
<q-knob
  v-model="model"
  :min="min"
  :max="max"
  :placeholder="'$ ' + model"
/>

<!-- 禁用状态 -->
<q-knob
  disable
  v-model="model"
  :min="min"
  :max="max"
/>

Vue属性

支持v-model这应该是一个数字。

Vue属性 类型 说明
size 字符串 CSS字符串，确定旋钮的宽度和高度。例如：“120px”，“12rem”。
step 数字 表示模型可以采用的两个值之间的差异的数字。默认值：1。
min 数字 模型可以采用的最小值。
max 数字 模型可以采用的最大值。
color 字符串 一个来自Quasar调色板的颜色。
trackColor 字符串 一个来自Quasar调色板的颜色。
lineWidth 字符串 旋钮的线宽。默认值是’6px’。
readonly 布尔 只有“display”模式。模型不能改变。
disable 布尔 当设置为“true”时，模型不能改变。

Vue事件

Vue事件 说明
@input（newVal） 模型值更改时立即触发。
@change（newVal） 模型值延迟更改时触发。
@drag-value(val) (v0.15.11+) 在旋钮上拖动（或单击）时触发。

更多示例

懒惰输入

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

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

我们可以更进一步，在拖动时显示当前值：

<!-- v0.15.11+ -->
<q-knob
  :value="model"
  @change="val => { model = val }"
  @drag-value="val => { currentValue = val }"
  :min="min"
  :max="max"
>
  {{ currentValue }}
</q-knob>

多色欧元图标

 <q-knob
  v-model="model"
  size="120px"
  style="font-size: 1.5rem"
  color="secondary"
  track-color="yellow-3"
  line-width="5px"
  :min="min"
  :max="max"
  :step="5"
>
  <q-icon class="on-left" name="euro_symbol" /> {{model}}
</q-knob>

只读状态（与禁用不同，因为鼠标指针不会改变）

<q-knob
  v-model="model"
  :min="min"
  :max="max"
  color="primary"
  readonly
>
  <q-icon class="on-left" name="volume_up" /> {{model}}
</q-knob>

使用QField突出显示错误状态

<q-field
  label="Knob"
  icon="cake"
  helper="Touch to change"
  :error="knobHasError"
  error-label="Invalid value selected."
>
  <q-knob
    v-model="model"
    :min="min"
    :max="max"
  >
    <q-icon class="on-left" name="volume_up" /> {{model}}
  </q-knob>
</q-field>
评分 上传