Material You

Switch 开关

开关可以打开或关闭单个元素的状态，是调整设置的首选方法。它们用于控制二进制选项 - 打开/关闭或正确/错误。

使用

通过v-model绑定变量来获取 Switch 的选中状态。

在代码中：

<template>
    <div class="container">
        <m-switch v-model="isChecked"></m-switch>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isChecked = ref(false)
</script>

通过字段获取 Switch 选中状态

设置checkedValue与uncheckedValue后，v-model将在二者之中变化

<template>
    <div class="container">
        <m-switch 
        checked-value="open" 
        unchecked-value="off" 
        v-model="checkedValue">
        </m-switch>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const checkedValue = ref('open')
</script>

将多个 Swtich 绑定到同一个数组

可以将多个 Switchs 绑定到同一个数组，此种使用方法必须设置 checkedValue。

<template>
  <div class="container">
    <m-space direction="column" :size="[24, 0]">
      <m-switch checked-value="Wi-Fi" v-model="model"></m-switch>
      <m-switch checked-value="Bluetooth" v-model="model"></m-switch>
      <m-switch checked-value="Do not disturb" v-model="model"></m-switch>
      <m-switch checked-value="Airpline mode" v-model="model"></m-switch>
    </m-space>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const model = ref([])
</script>

显示图标

通过传入withIcon属性，来设置 Switch 是否显示图标

三种withIcon的值分别为：false, true, 'both'

在代码中：

<template>
    <div class="container">
        <m-switch></m-switch>
        <m-switch with-icon></m-switch>
        <m-switch with-icon='both'></m-switch>
    </div>
</template>

禁用

通过设置disabled属性禁用 Switch。

API

属性

参数说明类型默认值
modelValue是否选中boolean | string | Arrayfalse
checkedValue选中状态的值boolean | stringtrue
uncheckedValue选中状态的值boolean | stringfalse
withIcon是否显示图标boolean | bothfalse
disabled按钮是否禁用booleanfalse

事件

事件名说明参数
click点击时触发event: Event
change状态改变时触发event: Event

方法

方法名说明参数
toggle切换状态-