切换 Vue 组件

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

切换组件

包含以下组件：

f7-toggle

切换属性

属性	类型	默认	描述
<f7-toggle> 属性
init	布尔值	true	初始化切换
name	字符串		切换输入名称
值	字符串数字		切换输入值
已选中	布尔值	false	定义切换输入是否已选中
禁用	布尔值	false	定义切换输入是否禁用
只读	布尔值	false	定义切换输入是否只读
提示	字符串		提示鼠标悬停/点击时显示的文本
tooltip-trigger	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`

切换事件

事件	描述
<f7-toggle> 事件
change	当切换复选框状态改变时将触发此事件。在触摸设备上可能不会发生此事件，因此最好使用 next event 代替`toggle:change`toggleChange
toggle:change	当切换复选框状态改变时将触发此事件

切换方法

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

切换 v-model

切换 Vue 组件支持v-modelonchecked派发动作

<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
示例