切换 Vue 组件

切换 Vue 组件表示切换组件。

切换组件

包含以下组件

f7-toggle

切换属性

属性	类型	默认	描述
<f7-toggle>属性
init	布尔	true	初始化切换
name	字符串		切换输入名称
value	字符串数字类型		切换输入值
checked	布尔	假	定义切换输入是否选中
disabled	布尔	假	定义是否禁用切换输入
只读	布尔	假	定义切换输入是否只读
工具提示	字符串		工具提示悬停/按下时显示的文本
工具提示触发器	字符串	悬停	定义如何触发（打开）工具提示。可以是 `hover`、`click` 或 `manual`

切换事件

事件	描述
<f7-toggle> 事件
更改	当切换复选框状态发生变化时，将触发该事件。触控设备上可能不会发生此事件，因此最好改用下一个 `toggle:change` 事件
切换：更改	当切换复选框状态发生变化时，将触发该事件

切换方法

<f7-toggle> 方法
.toggle()	切换复选框状态

切换 v-model

切换 Vue 组件支持 checked 属性上的 v-model

<template>
  <f7-page>
    <f7-toggle v-model:checked="jobIsDone" />
    <p>Job is done: {{ jobIsDone }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        jobIsDone: false,
      };
    }
  };
</script>

示例

toggle.vue

<template>
  <f7-page>
    <f7-navbar title="Toggle"></f7-navbar>
    <f7-block-title>Super Heroes</f7-block-title>
    <f7-list simple-list strong outline-ios dividers-ios>
      <f7-list-item>
        <span>Batman</span>
        <f7-toggle checked></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>Aquaman</span>
        <f7-toggle checked color="blue"></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>Superman</span>
        <f7-toggle checked color="red"></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>Hulk</span>
        <f7-toggle color="green"></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>Spiderman (Disabled)</span>
        <f7-toggle disabled></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>Ironman (Disabled)</span>
        <f7-toggle checked disabled></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>Thor</span>
        <f7-toggle checked color="orange"></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>Wonder Woman</span>
        <f7-toggle color="pink"></f7-toggle>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7BlockTitle, f7List, f7ListItem, f7Toggle } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7List,
    f7ListItem,
    f7Toggle,
  },
};
</script>

改善此文档

在此页面上

切换组件
切换属性
切换事件
切换方法
切换 v-model
示例