复选框(Checkbox)

Quasar复选框组件是用户选择或切换的基本元素。 它具有许多功能，如下所述。

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

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QCheckbox']
}

基本用法

<!-- 无标签: -->
<q-checkbox v-model="checked" />

<!-- 带有一个标签 -->
<q-checkbox v-model="checked" label="Checkbox Label" />

<!-- 禁用: -->
<q-checkbox v-model="checked" disable />

Vue属性

支持v-model，它应该绑定到你的作用域中的布尔值或数组。

Vue属性 类型 说明
val 对象 当使用Array作为v-model时，用于修改复选框的v-model。
true-value 任何类型 当模型具有此值时，进入“true”状态。
false-value 任何类型 当模型具有此值时，进入“false”状态。
indeterminate-value 任何类型 当模型具有此值时，进入“indeterminate(不确定)”状态。默认是null。
toggle-indeterminate 布尔 在3个状态之间切换，包括“indeterminate”。
label 字符串 复选框的文本标签。
left-label 布尔 如果标签应放置在复选框的左侧，则设置为“true”。
checked-icon 字符串 选中复选框时使用的可选的图标。
unchecked-icon 字符串 当复选框未被选中时使用的可选的图标。
indeterminate-icon 字符串 当复选框处于不确定状态时使用的可选的图标。
color 字符串 来自Quasar调色板的颜色。
keep-color 布尔 不太真实时保持颜色。
`readonly’ 布尔 设置为“true”，使复选框为只读。
disable 布尔 设置为“true”，禁用复选框。
dark 布尔 背景较暗时设置为“true”。

Vue事件

Vue事件 说明
@input 当它改变模型时触发。
@blur 当复选框失去焦点时触发。
@focus 当复选框获得焦点时触发。

数组作为模型

如果您有多个复选框用于选择，请使用数组作为模型对象并指定val属性。

<q-checkbox v-model="selection" val="one" label="One" />
<br><br>
<q-checkbox v-model="selection" val="two" label="Two" />
<br><br>
<q-checkbox v-model="selection" val="three" label="Three" />
<script>
export default {
  data () {
    return {
      selection: ['one', 'two', 'three']
    }
  }
}
</script>

选中所有复选框将使’selection’范围变为 ['one'，'two'，'three']。 解除所有复选框将导致selection为一个空数组[]。

更多示例

有很多属性可用于帮助快速格式化复选框。 复选框的一个有趣功能是用户点击/轻按它以改变其状态时所产生的连锁效应。

自定义模型值

您可以使用自定义的值来代替默认的“true/false”值：

<q-checkbox
  v-model="customModel"
  color="secondary"
  label="Do you agree with the terms & conditions?"
  true-value="yes"
  false-value="no"
/>

特定的图标

有时候，你可能需要一个复选框来作为一种按钮，以便打开或关闭某些东西。 你可以用checked-icon和unchecked-icon属性做到这一点。

<!-- 一个快乐和不快乐的笑脸，也许是一个满意的反馈 -->
<q-checkbox
  v-model="checked"
  checked-icon="sentiment very satisfied"
  unchecked-icon="sentiment very dissatisfied"
/>

<!-- 一只眼睛和一只划掉的眼睛来表示能见度 -->
<q-checkbox
  v-model="checked"
  checked-icon="visibility"
  unchecked-icon="visibility_off"
/>

着色

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

<q-checkbox v-model="checked" color="teal" />

<q-checkbox v-model="checked" color="orange" />

<q-checkbox v-model="checked" color="dark" />

标签位置

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

<q-checkbox
  v-model="checked"
  color="teal"
  left-label
  label="Checkbox Label"
/>

列表中的用法

在下面的例子中，我们使用QItem的右侧插入复选框，但它可以在任何地方使用。

<q-list link>
  <!--
     渲染<label>标记（注意tag ="label"）
     所以整个QItem会响应点击
     以更改复选框状态。
  -->
  <q-item tag="label">
    <q-item-side>
      <q-checkbox v-model="checked" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label">
    <q-item-side>
      <q-checkbox v-model="checked" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
      <q-item-tile sublabel>Lorem ipsum</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label" multiline>
    <q-item-side>
      <q-checkbox v-model="checked" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Events and reminders</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>
单选框 切换组件