Switch 开关

开关选择器。

何时使用

• 需要表示开关状态/两种状态之间的切换时；
• 和 checkbox 的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

使用示例

基本使用

普通状态



禁用状态

<template>
  普通状态
  <br />
  <br />
  <f-switch v-model:checked="checked" />
  <f-switch v-model:value="checked" />
  <f-switch v-model="checked" />

  <br />
  <br />

  禁用状态
  <br />
  <br />
  <f-switch v-model:checked="checked" disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>

<style lang="scss" scoped></style>

带描述使用

<template>
  <f-switch v-model:checked="checked" checked-children="开" un-checked-children="关" />
  <br />
  <br />
  <f-switch v-model:checked="checked">
    <template #checkedChildren><check-outlined /></template>
    <template #unCheckedChildren><close-outlined /></template>
  </f-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'

const checked = ref(false)
</script>

<style lang="scss" scoped></style>

尺寸

默认



小

<template>
  默认
  <br />
  <br />
  <f-switch v-model:checked="checked" />

  <br />
  <br />

  小
  <br />
  <br />
  <f-switch v-model:checked="checked" size="small" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>

<style lang="scss" scoped></style>

API

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

注意

• 扩展标准v-model
• 扩展value(v-model)，保持与antd统一，以保证后面二次封装form无需特殊处理

事件

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

方法

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