单选框(Radio)

Quasar Radio组件是用户输入的另一个基本元素。 您可以使用它来为用户提供一种从多个选项中选择一个选项的方法。

另请参阅选项组文档了解创建切换组的其他可能性。

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QRadio']
}

基本用法

<!-- 用户的三种选择 -->
<q-radio v-model="option" val="opt1" label="Option 1" />
<q-radio v-model="option" val="opt2" label="Option 2" />
<q-radio v-model="option" val="opt3" label="Option 3" />

Vue属性

支持v-model，它应该绑定到您的作用域中的字符串。选择一个选项（点击/轻按单选框）可以让你的v-model变成Radio的val。

Vue属性 类型 说明
val 对象 用于修改单选框的v-model。
label 字符串 单选框的文字标签。
left-label 布尔 如果标签应放置在单选框左侧，请设置为“true”。
checked-icon 字符串 当单选框被选中时使用的图标。默认是一个简单的单选框图标。
uncheck-icon 字符串 当单选框未被选中时使用的图标。默认是简单的未选中的单选框图标。
color 字符串 单选框的Quasar调色板中的颜色。
keep-color 布尔 未选中时保持颜色。
readonly 布尔 设置为“true”，使单选框只读。
disable 布尔 设置为“true”，禁用单选框。
dark 布尔 背景较暗时设置为“true”。

Vue事件

Vue事件 说明
@input 当它被选中时触发。
@blur 当单选框失去焦点触发。
@focus 当单选框获得焦点触发。

更多示例

有很多属性可用于快速格式化单选框。 Radio的一个有趣功能是用户点击/轻按它以改变其状态时获得的连锁反应。

指定状态图标

您可以使用checked-icon和unchecked-icon属性来显示不同的图标，而不是默认的单选框图标。

<q-radio
  v-model="option"
  val="opt1"
  unchecked-icon="visibility_off"
  checked-icon="visibility"
  label="Show only Area 1"
/>

<q-radio
  v-model="option"
  val="opt2"
  unchecked-icon="visibility_off"
  checked-icon="visibility"
  label="Show only Area 2"
/>

<q-radio
  v-model="option"
  val="opt3"
  unchecked-icon="visibility_off"
  checked-icon="visibility"
  label="Show only Area 3"
/>

着色

使用color属性来控制单选框颜色。

<!-- 默认颜色，即"primary" -->
<q-radio v-model="option" val="opt2" />

<!-- Teal -->
<q-radio v-model="option" val="opt3" color="teal" />

<!-- Orange-7 -->
<q-radio v-model="option" val="opt4" color="orange-7" />

标签位置

使用left-label属性将标签移动到单选框左侧。

<q-radio
  v-model="option"
  val="opt2"
  left-label
  label="Option 2"
/>

列表中的用法

<q-list link>
  <!--
    渲染<label>标记（注意 tag ="label"）
    所以整个QItem会响应点击
    以更改切换状态。
  -->
  <q-item tag="label">
    <q-item-side>
      <q-radio v-model="option" val="opt1" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Option 1</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label">
    <q-item-side>
      <q-radio v-model="option" val="opt2" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Option 2</q-item-tile>
      <q-item-tile sublabel>Allows notifications</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label">
    <q-item-side>
      <q-radio v-model="option" val="opt3" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Option 3</q-item-tile>
      <q-item-tile sublabel>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </q-item-tile>
    </q-item-main>
  </q-item>
</q-list>
范围 复选框