选项组

Form Components 表单组件
Radio 单选框
Form Components 表单组件
Checkbox 复选框
Form Components 表单组件
Toggle 开关
Form Components 表单组件
Button Toggle 按钮开关

QOptionGroup 组件是一个辅助组件，它帮助您更好地对二进制（开或关、真或假、1 或 0）形式的输入组件（如复选框、单选或开关）进行分组。该组件的一个很好的用途是提供一组打开和关闭的选项或设置。

QOptionGroup API

QOptionGroup API
name
: String
说明
用于指定控件的名称；如果处理直接提交到 URL 的表单时很有用
keep-color
: Boolean
说明
当取消选中输入组件时，是否保留颜色（如果指定了任何颜色）？

用法

标准

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="primary"
    />
  </div>
</template>

搭配 QCheckbox 或 QToggle

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="green"
      type="checkbox"
    />
  </div>
</template>

WARNING

复选框/开关的 model 必须是一个数组。

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="yellow"
      type="toggle"
    />
  </div>
</template>
Option 1
Option 2
Option 3

使用标签插槽
v2.2+

这里有两种类型的插槽。一个是通用的用于所有的选项，除非它额外声明了一个带索引的标签（label-N ,N 是从 0 开始的选项的索引）。两种类型的插槽都可以接受响应式的选项作为参数。

请注意，我们为第一个选项（索引 0 处的选项）使用特定的标签槽，我们还添加了一个 QTooltip。

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      type="checkbox"
      :options="options"
    >
      <template v-slot:label="opt">
        <div class="row items-center">
          <span class="text-teal">{{ opt.label }}</span>
          <q-icon :name="opt.icon" color="teal" size="1.5em" class="q-ml-sm" />
        </div>
      </template>

      <template v-slot:label-0="opt">
        <!-- custom label for option at index 0 -->
        <span class="text-weight-bold">{{ opt.label }}</span>
        <span> (has QTooltip)</span>
        <q-tooltip class="bg-primary" :offset="[0,0]">Tooltip</q-tooltip>
      </template>
    </q-option-group>
  </div>
</template>

标签放在左边

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="red"
      left-label
    />
  </div>
</template>

行内的

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="primary"
      inline
    />
  </div>
</template>

紧凑的

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="primary"
      inline
      dense
    />
  </div>
</template>

禁用

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="green"
      disable
    />
  </div>
</template>

TIP

options 数组中的对象，可以容纳 QToggle， QCheckbox 或 QRadio 的所有属性，列如：disable 或 leftLabel。如下例所示：

禁用特定的选项

<template>
  <div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="green"
    />
  </div>
</template>

黑色

<template>
  <div class="q-pa-lg bg-grey-10 text-white">
    <q-option-group
      v-model="group"
      :options="options"
      dark
      color="yellow"
    />
  </div>
</template>

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QOptionGroup 声明 name 属性，否则表单数据中不会包含它：

<template>
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <div class="bg-grey-2 q-pa-sm rounded-borders">
        Preferred genre:
        <q-option-group
          name="preferred_genre"
          v-model="preferred"
          :options="options"
          color="primary"
          inline
        />
      </div>

      <div class="bg-grey-2 q-pa-sm rounded-borders">
        Accepted genres:
        <q-option-group
          name="accepted_genres"
          v-model="accepted"
          :options="options"
          type="checkbox"
          color="primary"
          inline
        />
      </div>

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
      </div>
    </q-form>

    <q-card v-if="submitResult.length > 0" flat bordered class="q-mt-md bg-grey-2">
      <q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
      <q-separator />
      <q-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
        >{{ item.name }} = {{ item.value }}</div>
      </q-card-section>
    </q-card>
  </div>
</template>
Preferred genre:
Accepted genres:
查看更多？
Form Components 表单组件
Button Toggle 按钮开关
Form Components 表单组件
Slider 滑块
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。