切换组件

Quasar切换组件组件是用户输入的另一个基本元素。 您可以使用它来转换设置、特性或者输入真/假来表示开启或关闭。

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

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QToggle']
}

基本用法

<q-toggle v-model="checked" label="Toggle Label" />

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

<!-- 带有一个特定的颜色 -->
<q-toggle v-model="checked" color="teal-8" />

<!-- 带有图标 -->
<q-toggle v-model="checked" icon="alarm" label="Toggle Label" />

<!-- 禁用状态 -->
<q-toggle v-model="checked" disable label="Toggle Label" />

检查“Vue属性”以获取更多选项。

Vue属性

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

Vue属性 类型 说明
val 对象 当使用数组作为v-model时，用于修改切换组件的v-model。
true-value 任何 当模型具有此值时，进入“true”状态。
false-value 任何 当模型具有此值时，进入“false”状态。
label 字符串 切换组件的文本标签。
left-label 布尔 设置为“true”，如果标签应放置在切换组件的左侧。
icon 字符串 可选的使用的图标。如果使用checked-icon和unchecked-icon, 则会覆盖这个属性。
checked-icon 字符串 当选中切换组件时使用的图标。
unchecked-icon 字符串 未选中切换组件时使用的图标。
color 字符串 来自Quasar调色板的颜色。
keep-color 布尔 不太真实时保持颜色。
readonly 布尔 设置为“true”，使切换组件只读。
disable 布尔 设置为“true”，禁用切换组件。
dark 布尔 背景较暗时设置为“true”。

Vue事件

Vue事件 说明
@input(newVal) 模型值更改时立即触发。
@change(newVal) 模型值延迟更改时触发。
@ blur 当切换组件失去焦点触发。
@ focus 切换组件得到焦点触发。

数组作为模型

如果您有多个切换组件组件选项，则还可以使用数组作为模型对象，并将插入值的val属性用于数组。

<template>
  <div>
    <q-toggle v-model="selection" val="one" label="One" />
    <q-toggle v-model="selection" val="two" label="Two" />
    <q-toggle v-model="selection" val="three" label="Three" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      selection: ['two']
    }
  }
}
</script>

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

更多示例

有很多属性可用于帮助快速格式化切换组件。 Toggle的一个有趣功能是用户点击/轻按以改变其状态时获得的连锁反应。

自定义模型值

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

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

指定状态图标

对于更多信息切换，您还可以使用checked-icon和unchecked-icon属性在切换组件中显示一个插入图标。

<q-toggle
  v-model="checked"
  unchecked-icon="visibility_off"
  checked-icon="visibility"
  label="Toggle Label"
/>

指定checked-icon和unchecked-icon会覆盖icon属性, 如果您也使用过的话。

着色

使用color道具来控制切换组件的颜色。

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

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

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

标签位置

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

<q-toggle
  v-model="checked"
  left-label
  label="Checkbox Label"
/>

列表中的用法

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

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