Switch 开关

开关选择器，支持受控/非受控，可配置内嵌文字标签。

基础用法

当前：关

基础开关，v-model 绑定状态

vue

<template>
  <div>
    <ASwitch v-model="val" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">当前：{{ val ? '开' : '关' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASwitch } from '@lite-code/aui-vue'

const val = ref(false)
</script>

禁用状态

禁用关闭与禁用开启

vue

<template>
  <div style="display: flex; gap: 12px; align-items: center">
    <ASwitch disabled />
    <ASwitch :model-value="true" disabled />
  </div>
</template>

<script setup lang="ts">
import { ASwitch } from '@lite-code/aui-vue'
</script>

内嵌文字

通过 checkedChildren / uncheckedChildren 配置开关两种状态的文字。

开关内嵌文字标签

vue

<template>
  <div style="display: flex; gap: 12px; align-items: center">
    <ASwitch v-model="val" checked-children="开" unchecked-children="关" />
    <ASwitch v-model="val2" checked-children="ON" unchecked-children="OFF" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASwitch } from '@lite-code/aui-vue'

const val = ref(true)
const val2 = ref(false)
</script>

尺寸

sm / md / lg 三种尺寸

vue

<template>
  <div style="display: flex; gap: 16px; align-items: center">
    <ASwitch size="sm" :model-value="true" />
    <ASwitch size="md" :model-value="true" />
    <ASwitch size="lg" :model-value="true" />
  </div>
</template>

<script setup lang="ts">
import { ASwitch } from '@lite-code/aui-vue'
</script>

API

Props

属性	类型	默认值	说明
modelValue	boolean	—	受控状态
defaultChecked	boolean	false	非受控初始状态
disabled	boolean	false	禁用
size	'sm' | 'md' | 'lg'	'md'	尺寸
checkedChildren	string	—	开启状态文字
uncheckedChildren	string	—	关闭状态文字

Events

事件名	回调参数	说明
update:modelValue	(checked: boolean)	状态变更
change	(checked: boolean)	状态变更