选项组

Quasar Option Group组件是一个辅助组件，它允许您更好地控制二进制（如开或关，true或false，1或0）形式的输入组件（如复选框，单选框或切换组件）的分组。 该组件的一个很好的用法是为用户提供一组选项或设置来打开和关闭，以及提供组件的名称。

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QOptionGroup']
}

基本用法

一组复选框的示例：

<template>
  <q-option-group
    color="secondary"
    type="checkbox"
    v-model="group"
    :options="[
      { label: 'Option 1', value: 'op1' },
      { label: 'Option 2', value: 'op2' },
      { label: 'Option 3', value: 'op3' }
    ]"
  />
</template>

<script>
export default {
  data () {
    return {
      // `v-model`绑定到`group`，
       // 必须是复选框和切换组件的数组
      group: ['opt1']
    }
  }
}
</script>

一组单选框的例子：

<template>
  <q-option-group
    color="secondary"
    type="radio"
    v-model="group"
    :options="[
      { label: 'Option 1', value: 'op1' },
      { label: 'Option 2', value: 'op2' },
      { label: 'Option 3', value: 'op3' }
    ]"
  />
</template>

<script>
export default {
  data () {
    return {
      // `v-model`绑定到`group`，
       //使用单选框时必须是字符串
      group: 'opt1'
    }
  }
}
</script>

Vue属性

支持v-model，这是必需的。对于“radio”类型，它必须是一个字符串，对于其它类型（“checkbox”或“toggle”类型）绑定到“v-model”的范围变量必须是数组。

Vue属性 类型 说明
type 字符串 要使用的输入组件的类型。默认值是radio。其他选择是checkbox和toggle。
options 数组 具有value和label属性的对象数组。二进制组件将根据此数组创建。
left-label 布尔 当设置为“true”时，标签将放在左侧。
inline 布尔 调整二进制组件的显示来填充行，而不是垂直堆叠。
color 字符串 来自Quasar调色板的颜色。
keep-color 布尔 未选择时保持颜色。
readonly 布尔 设置为“true”，使二进制组件为只读。
disable 布尔 当设置为“true”时，二进制组件不可选，因此不能更改“v-model”。
dark 布尔 背景较暗时设置为“true”。

Vue事件

Vue事件 说明
@input 模型更改时立即触发。
@change 组件模型更改时触发。
@focus 组件获得焦点时触发。
@blur 当组件失去焦点时触发。

懒惰输入

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

<q-option-group
  type="radio"
  :value="model"
  @change="val => { model = val }"
  :options="[
    { label: 'Option 1', value: 'op1' },
    { label: 'Option 2', value: 'op2' },
    { label: 'Option 3', value: 'op3' }
  ]"
/>

其他例子

一组不同颜色的单选框。

<q-option-group
  type="radio"
  v-model="group"
  :options="[
    { label: 'Option 1', value: 'op1' },
    { label: 'Option 2', value: 'op2', color: 'secondary' },
    { label: 'Option 3', value: 'op3', color: 'amber' }
  ]"
/>

还有一组切换，但在可能的情况下不能垂直堆叠。 我们添加inline布尔属性。

<q-option-group
  inline
  type="toggle"
  v-model="group"
  :options="[
    { label: 'Option 1', value: 'op1' },
    { label: 'Option 2', value: 'op2' },
    { label: 'Option 3', value: 'op3' }
  ]"
/>

您通常也会将此组件添加到QField组件中，如下所示。

<q-field
  icon="cloud"
  helper="Choose your option"
  label="Pick something"
  :error="hasError"
  error-label="Select at least one option"
>
  <q-option-group
    type="radio"
    v-model="group"
    :options="[
      { label: 'Option 1', value: 'op1' },
      { label: 'Option 2', value: 'op2' },
      { label: 'Option 3', value: 'op3' }
    ]"
  />
</q-field>
按钮切换 日期时间输入