使用场景
立即切换二态设置。默认绑定布尔值；activeValue 与 inactiveValue 可定义字符串或数值状态。异步确认由 beforeChange 决定是否允许变化。
绑定、文本与事件
change 与 input 携带切换后的值；loading 和 disabled 阻止操作。inlinePrompt 将状态文字放在轨道内。
绑定、文本与事件
vue
<template>
<div class="example">
<AsamSwitch
ref="control"
v-bind="{ 'active-text': '启用', 'inactive-text': '停用' }"
v-model="enabled"
@change="event = String($event)"
/>
<AsamSwitch
v-model="status"
v-bind="{
'active-value': 'on',
'inactive-value': 'off',
'inline-prompt': true,
'active-text': '开',
'inactive-text': '关'
}"
/>
<AsamButton type="default" @click="control?.focus()"> 聚焦开关 </AsamButton>
<AsamSwitch :model-value="true" disabled active-text="禁止切换" aria-label="禁用开关" />
<output>启用：{{ enabled }}；状态：{{ status }}；事件：{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSwitchBasicExample' });
import { ref } from 'vue';
import { AsamSwitch, AsamButton } from '@asam-ui/ui';
import type { AsamSwitchExpose } from '@asam-ui/ui';
const control = ref<AsamSwitchExpose>();
const enabled = ref(false);
const status = ref('off');
const event = ref('尚未更改');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamSwitch
ref="control"
v-bind="{ 'active-text': '启用', 'inactive-text': '停用' }"
v-model="enabled"
@change="event = String($event)"
/>
<AsamSwitch
v-model="status"
v-bind="{
'active-value': 'on',
'inactive-value': 'off',
'inline-prompt': true,
'active-text': '开',
'inactive-text': '关'
}"
/>
<AsamButton type="default" @click="control?.focus()"> 聚焦开关 </AsamButton>
<AsamSwitch :model-value="true" disabled active-text="禁止切换" aria-label="禁用开关" />
<output>启用：{{ enabled }}；状态：{{ status }}；事件：{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSwitchBasicExample' });
import { ref } from 'vue';
import { AsamSwitch, AsamButton } from '@asam-ui/ui';
const control = ref();
const enabled = ref(false);
const status = ref('off');
const event = ref('尚未更改');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>异步确认与动作插槽
返回 boolean 表示同步允许或拒绝，Promise
异步确认与动作插槽
vue
<template>
<div class="example">
<AsamSwitch v-model="enabled" :loading="loading" :before-change="confirm">
<template #active-action> ✓ </template>
<template #inactive-action> × </template>
</AsamSwitch>
<AsamCheckboxItem v-model="allow"> 允许本次切换 </AsamCheckboxItem>
<AsamSwitch v-model="synchronous" :before-change="() => allow" aria-label="同步确认" />
<output>值：{{ enabled }}；确认中：{{ loading }}；同步值：{{ synchronous }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSwitchConfirmationExample' });
import { ref } from 'vue';
import { AsamSwitch, AsamCheckboxItem } from '@asam-ui/ui';
const enabled = ref(false);
const synchronous = ref(false);
const allow = ref(true);
const loading = ref(false);
async function confirm() {
loading.value = true;
try {
await new Promise((resolve) => setTimeout(resolve, 250));
return allow.value;
} finally {
loading.value = false;
}
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamSwitch v-model="enabled" :loading="loading" :before-change="confirm">
<template #active-action> ✓ </template>
<template #inactive-action> × </template>
</AsamSwitch>
<AsamCheckboxItem v-model="allow"> 允许本次切换 </AsamCheckboxItem>
<AsamSwitch v-model="synchronous" :before-change="() => allow" aria-label="同步确认" />
<output>值：{{ enabled }}；确认中：{{ loading }}；同步值：{{ synchronous }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSwitchConfirmationExample' });
import { ref } from 'vue';
import { AsamSwitch, AsamCheckboxItem } from '@asam-ui/ui';
const enabled = ref(false);
const synchronous = ref(false);
const allow = ref(true);
const loading = ref(false);
async function confirm() {
loading.value = true;
try {
await new Promise((resolve) => setTimeout(resolve, 250));
return allow.value;
} finally {
loading.value = false;
}
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamSwitch size="large" :model-value="true" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamSwitch size="big" :model-value="true" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamSwitch size="default" :model-value="true" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamSwitch size="small" :model-value="true" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamSwitch :model-value="true" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSwitchSizesExample' });
import { ref } from 'vue';
import { AsamSwitch, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamSwitch size="large" :model-value="true" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamSwitch size="big" :model-value="true" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamSwitch size="default" :model-value="true" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamSwitch size="small" :model-value="true" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamSwitch :model-value="true" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSwitchSizesExample' });
import { ref } from 'vue';
import { AsamSwitch, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
四档密度控制轨道与交互区；active/inactive 与 active-action/inactive-action 插槽分别提供状态内容和滑块动作内容。公开实例为 focus 与 checked。旧业务状态需要显式 activeValue/inactiveValue，不通过字符串 true/false 猜测转换。
图标、数字值与实例状态
activeIcon / inactiveIcon 用于轨道内容，activeActionIcon / inactiveActionIcon 用于滑块动作。 完整说明。
图标、数字值、加载与实例状态
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<AsamSwitch
ref="control"
v-model="enabled"
inline-prompt
:width="64"
:active-icon="Check"
:inactive-icon="Close"
:active-action-icon="Check"
:inactive-action-icon="Close"
aria-label="图标开关"
@input="input = $event"
>
<template #active>启用内容</template>
<template #inactive>停用内容</template>
</AsamSwitch>
<AsamSwitch
v-model="numeric"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="停用"
:loading="loading"
aria-label="数字状态"
/>
<AsamCheckboxItem v-model="loading">数字状态加载中</AsamCheckboxItem>
<AsamSwitch
v-model="enabled"
inline-prompt
:active-icon="Check"
:inactive-icon="Close"
data-case="content-icons"
aria-label="状态图标"
/>
<AsamButton type="default" @click="readChecked">读取 checked</AsamButton>
<output
>启用：{{ enabled }}；数字：{{ numeric }}；input：{{ input }}；实例 checked：{{
checked
}}</output
>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSwitch, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';
import type { AsamSwitchExpose, AsamValue } from '@asam-ui/ui';
import { Check, Close } from '@asam-ui/icons-vue';
const enabled = ref(false);
const numeric = ref(0);
const loading = ref(false);
const input = ref<AsamValue>(false);
const checked = ref(false);
const control = ref<AsamSwitchExpose>();
const readChecked = () => {
checked.value = control.value?.checked ?? false;
};
defineOptions({ name: 'AsamSwitchAppearanceDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<AsamSwitch
ref="control"
v-model="enabled"
inline-prompt
:width="64"
:active-icon="Check"
:inactive-icon="Close"
:active-action-icon="Check"
:inactive-action-icon="Close"
aria-label="图标开关"
@input="input = $event"
>
<template #active>启用内容</template>
<template #inactive>停用内容</template>
</AsamSwitch>
<AsamSwitch
v-model="numeric"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="停用"
:loading="loading"
aria-label="数字状态"
/>
<AsamCheckboxItem v-model="loading">数字状态加载中</AsamCheckboxItem>
<AsamSwitch
v-model="enabled"
inline-prompt
:active-icon="Check"
:inactive-icon="Close"
data-case="content-icons"
aria-label="状态图标"
/>
<AsamButton type="default" @click="readChecked">读取 checked</AsamButton>
<output
>启用：{{ enabled }}；数字：{{ numeric }}；input：{{ input }}；实例 checked：{{
checked
}}</output
>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSwitch, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';
import { Check, Close } from '@asam-ui/icons-vue';
const enabled = ref(false);
const numeric = ref(0);
const loading = ref(false);
const input = ref(false);
const checked = ref(false);
const control = ref();
const readChecked = () => {
checked.value = control.value?.checked ?? false;
};
defineOptions({ name: 'AsamSwitchAppearanceDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>API 阅读方式
API 按公开类型与运行默认值生成；未知默认值不等于 false 或空值。 完整说明。
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
API
属性 AsamSwitchProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue | 绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型 | V | undefined | false |
activeValue | switch 状态为 on 时的值 | V | undefined | true |
inactiveValue | switch的状态为 off 时的值 | V | undefined | false |
disabled | 是否禁用 | boolean | undefined | undefined |
loading | 是否显示加载中 | boolean | undefined | false |
validateEvent | 是否触发表单验证 | boolean | undefined | true |
activeText | switch 打开时的文字描述 | string | undefined | "" |
inactiveText | switch 的状态为 off 时的文字描述 | string | undefined | "" |
name | switch 对应的 name 属性 | string | undefined | "" |
id | input 的 id | string | undefined | — |
ariaLabel | 等价于原生 input aria-label 属性 | string | undefined | — |
tabindex | input 的 tabindex | (AsamSwitchProps<V>)["tabindex"] | — |
width | switch 的宽度 | (AsamSwitchProps<V>)["width"] | "" |
inlinePrompt | 无论图标或文本是否显示在点内，只会呈现文本的第一个字符 | boolean | undefined | false |
inactiveActionIcon | off状态下显示的图标组件 | (AsamSwitchProps<V>)["inactiveActionIcon"] | — |
activeActionIcon | on状态下显示的图标组件 | (AsamSwitchProps<V>)["activeActionIcon"] | — |
activeIcon | switch 状态为 on 时所显示图标，设置此项会忽略 active-text | (AsamSwitchProps<V>)["activeIcon"] | — |
inactiveIcon | switch 状态为 off 时所显示图标，设置此项会忽略 inactive-text | (AsamSwitchProps<V>)["inactiveIcon"] | — |
beforeChange | switch 状态改变前的钩子，返回 false 或者返回 Promise 且被 reject 则停止切换 | (() => Promise<boolean> | boolean) | undefined | — |
size | switch 的大小 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
事件 AsamSwitchEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: AsamValue] | — |
change | — | [value: AsamValue] | — |
input | — | [value: AsamValue] | — |
插槽 AsamSwitchSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
active | — | (() => unknown) | undefined | — |
inactive | — | (() => unknown) | undefined | — |
active-action | — | (() => unknown) | undefined | — |
inactive-action | — | (() => unknown) | undefined | — |
实例方法与状态 AsamSwitchExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
focus | 手动 focus 到 switch 组件 | () => void | — |
checked | 开关是否打开。 | boolean | — |
用法与契约补充说明
图标、数字值与实例状态
activeIcon / inactiveIcon 用于轨道内容，activeActionIcon / inactiveActionIcon 用于滑块动作。 active / inactive 插槽覆盖内容，active-action / inactive-action 覆盖动作；inlinePrompt 将内容 放入轨道。activeValue 与 inactiveValue 可为字符串、数字或布尔值，模型必须使用同一集合。 loading 和 disabled 禁止操作；beforeChange 可同步允许/拒绝，也可返回 Promise。 input / change / update:modelValue 各自保留实际新值。focus 聚焦原生输入，checked 是实时布尔状态。
API 阅读方式
旧 label 改用 ariaLabel（模板中写 aria-label）。旧 activeColor/inactiveColor/borderColor 已移除，颜色分别用 CSS 变量 --el-switch-on-color、--el-switch-off-color、--el-switch-border-color 设置；变量可写在实例 style 中，状态值仍由 activeValue/inactiveValue 决定。
关联组件
参数与事件补充说明
参数与事件说明
modelValue
必填：否；声明来源：ASAM 声明。
默认值与来源
false（已安装运行时；已安装组件）activeValue
必填：否；声明来源：ASAM 声明。
默认值与来源
true（已安装运行时；已安装组件）inactiveValue
必填：否；声明来源：ASAM 声明。
默认值与来源
false（已安装运行时；已安装组件）disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）loading
必填：否；声明来源：ASAM 声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）validateEvent
必填：否；声明来源：ASAM 声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）activeText
必填：否；声明来源：ASAM 声明。
默认值与来源
""（已安装运行时；已安装组件）inactiveText
必填：否；声明来源：ASAM 声明。
默认值与来源
""（已安装运行时；已安装组件）name
必填：否；声明来源：ASAM 声明。
默认值与来源
""（已安装运行时；已安装组件）id
必填：否；声明来源：ASAM 声明。
ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tabindex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
width
必填：否；声明来源：上游声明。
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
inlinePrompt
必填：否；声明来源：上游声明。
inlinePrompt 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
inactiveActionIcon
必填：否；声明来源：上游声明。
inactiveActionIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamSwitchProps<V>)["inactiveActionIcon"]>, (...args: never[]) => unknown>>[1]): any
inactiveActionIcon.__isFragment:undefined— 依赖声明inactiveActionIcon.__isTeleport:undefined— 依赖声明inactiveActionIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
activeActionIcon
必填：否；声明来源：上游声明。
activeActionIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamSwitchProps<V>)["activeActionIcon"]>, (...args: never[]) => unknown>>[1]): any
activeActionIcon.__isFragment:undefined— 依赖声明activeActionIcon.__isTeleport:undefined— 依赖声明activeActionIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
activeIcon
必填：否；声明来源：上游声明。
activeIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamSwitchProps<V>)["activeIcon"]>, (...args: never[]) => unknown>>[1]): any
activeIcon.__isFragment:undefined— 依赖声明activeIcon.__isTeleport:undefined— 依赖声明activeIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
inactiveIcon
必填：否；声明来源：上游声明。
inactiveIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamSwitchProps<V>)["inactiveIcon"]>, (...args: never[]) => unknown>>[1]): any
inactiveIcon.__isFragment:undefined— 依赖声明inactiveIcon.__isTeleport:undefined— 依赖声明inactiveIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
beforeChange
必填：否；声明来源：上游声明。
beforeChange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): boolean | Promise<boolean>
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）AsamSwitchProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamSwitchProps, AsamValue, AsamChoiceRuntimeProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamSwitchProps
type PublicContract<V extends AsamValue = boolean> = {
readonly "modelValue"?: V | undefined;
readonly "activeValue"?: V | undefined;
readonly "inactiveValue"?: V | undefined;
readonly "disabled"?: boolean | undefined;
readonly "loading"?: boolean | undefined;
readonly "validateEvent"?: boolean | undefined;
readonly "activeText"?: string | undefined;
readonly "inactiveText"?: string | undefined;
readonly "name"?: string | undefined;
readonly "id"?: string | undefined;
readonly "ariaLabel"?: string | undefined;
readonly "tabindex"?: (AsamSwitchProps<V>)["tabindex"];
readonly "width"?: (AsamSwitchProps<V>)["width"];
readonly "inlinePrompt"?: boolean | undefined;
readonly "inactiveActionIcon"?: (AsamSwitchProps<V>)["inactiveActionIcon"];
readonly "activeActionIcon"?: (AsamSwitchProps<V>)["activeActionIcon"];
readonly "activeIcon"?: (AsamSwitchProps<V>)["activeIcon"];
readonly "inactiveIcon"?: (AsamSwitchProps<V>)["inactiveIcon"];
readonly "beforeChange"?: (() => Promise<boolean> | boolean) | undefined;
"size"?: AsamControlSize | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
input
必填：是；声明来源：ASAM 声明。
AsamSwitchEmits 公开类型视图
ts
import type { AsamSwitchEmits, AsamValue } from '@asam-ui/ui';
// AsamSwitchEmits
type PublicContract = {
"update:modelValue": [value: AsamValue];
"change": [value: AsamValue];
"input": [value: AsamValue];
};参数与事件说明
active
必填：否；声明来源：ASAM 声明。
active 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
inactive
必填：否；声明来源：ASAM 声明。
inactive 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
active-action
必填：否；声明来源：ASAM 声明。
active-action 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
inactive-action
必填：否；声明来源：ASAM 声明。
inactive-action 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamSwitchSlots 公开类型视图
ts
import type { AsamSwitchSlots } from '@asam-ui/ui';
// AsamSwitchSlots
type PublicContract = {
"active"?: (() => unknown) | undefined;
"inactive"?: (() => unknown) | undefined;
"active-action"?: (() => unknown) | undefined;
"inactive-action"?: (() => unknown) | undefined;
};参数与事件说明
focus
必填：是；声明来源：上游声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
checked
必填：是；声明来源：上游声明。
checked 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
AsamSwitchExpose 公开类型视图
ts
import type { AsamSwitchExpose } from '@asam-ui/ui';
// AsamSwitchExpose
type PublicContract = {
"focus": () => void;
"checked": boolean;
};