Switch 开关

开关选择器。

代码演示

基础用法

<template>
  <a-switch v-model:checked="checked" />
</template>
<script setup>
import { ref } from 'vue';
const checked = ref(false);
</script>

不可用

Switch 失效状态。

<template>
  <a-space direction="vertical">
    <a-switch v-model:checked="checked1" :disabled="disabled" />
    <a-button type="primary" @click="onToggle">Toggle disabled</a-button>
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const checked = ref(true);
const disabled = ref(true);
const onToggle = () => {
  disabled.value = !disabled.value;
};
</script>

两种大小

size="small" 表示小号开关。

<template>
  <a-space direction="vertical">
    <a-switch v-model:checked="state.checked1" />
    <a-switch v-model:checked="state.checked2" size="small" />
  </a-space>
</template>
<script setup>
import { reactive } from 'vue';
const state = reactive({
  checked1: true,
  checked2: false,
});
</script>

加载中

标识开关操作仍在执行中。

<template>
  <a-space direction="vertical">
    <a-switch v-model:checked="state.checked1" loading />
    <a-switch v-model:checked="state.checked2" size="small" loading />
  </a-space>
</template>
<script setup>
import { reactive } from 'vue';
const state = reactive({
  checked1: true,
  checked2: false,
});
</script>

API

参数	说明	类型	默认值
autofocus	组件自动获取焦点	boolean	false
checked(v-model)	指定当前是否选中	checkedValue | unCheckedValue	false
checkedChildren	选中时的内容	string | slot
checkedValue	选中时的值	boolean | string | number	true
disabled	是否禁用	boolean	false
loading	加载中的开关	boolean	false
size	开关大小，可选值：default small	string	default
unCheckedChildren	非选中时的内容	string | slot
unCheckedValue	非选中时的值	boolean | string | number	false

事件

事件名称	说明	回调参数
change	变化时回调函数	Function(checked: boolean | string | number, event: Event)
click	点击时回调函数	Function(checked: boolean | string | number, event: Event)

方法

名称	描述
blur()	移除焦点
focus()	获取焦点