开关 Switch
这个组件叫做 Switch，听起来就像某款游戏机一样，好想玩......
基础使用
传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。
<template>
<px-space>
<px-switch v-model="value"></px-switch>
<px-switch :default-value="true"></px-switch>
</px-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>只读 & 禁用
readonly 设置只读，disabled 设置禁用，此时内部 <input> 都会被设置 disabled。它们之间几乎只有样式不一样。
Disabled:
Readonly:
<template>
<px-space>
Disabled:
<px-switch disabled></px-switch>
<px-switch disabled :default-value="true"></px-switch>
Readonly:
<px-switch readonly></px-switch>
<px-switch readonly :default-value="true"></px-switch>
</px-space>
</template>加载状态
loading 设置加载状态，会展示加载图标。
<template>
<px-space>
<px-switch loading></px-switch>
<px-switch loading :default-value="true"></px-switch>
<px-switch loading disabled></px-switch>
<px-switch loading disabled :default-value="true"></px-switch>
</px-space>
</template>提示信息
activeTip、inactiveTip 设置组件内部的文本提示，activeLabel、inactiveLabel 设置组件两侧的文本提示，也支持插槽的形式：active-tip、inactive-tip、active-label、inactive-label。
active-icon 和 inactive-icon 设置开关的图标。
<template>
<px-space direction="vertical">
<px-switch size="small">
<template #active-icon><IconCheckSolid></IconCheckSolid></template>
<template #inactive-icon><IconTimesSolid></IconTimesSolid></template>
<template #active-label>Active</template>
<template #inactive-label>Inactive</template>
<template #active-tip>active</template>
<template #inactive-tip>inactive</template>
</px-switch>
<px-switch
active-label="Active"
active-tip="active"
inactive-label="Inactive"
inactive-tip="inactive"
>
<template #active-icon><IconCheckSolid></IconCheckSolid></template>
<template #inactive-icon><IconTimesSolid></IconTimesSolid></template>
</px-switch>
<px-switch size="large">
<template #active-icon><IconCheckSolid></IconCheckSolid></template>
<template #inactive-icon><IconTimesSolid></IconTimesSolid></template>
<template #active-label>Active</template>
<template #inactive-label>Inactive</template>
<template #active-tip>active</template>
<template #inactive-tip>inactive</template>
</px-switch>
</px-space>
</template>
<script setup lang="ts">
import { IconCheckSolid, IconTimesSolid } from '@pixelium/web-vue/icon-hn/es'
</script>背景颜色
通过 activeColor、inactiveColor 设置背景颜色。
<template>
<px-space>
<px-switch
active-color="#13ce66"
inactive-color="#ff4949"
active-label="Active"
active-tip="active"
inactive-label="Inactive"
inactive-tip="inactive"
>
<template #active-icon>T</template>
<template #inactive-icon>F</template>
</px-switch>
</px-space>
</template>开关尺寸
size 属性设置开关的尺寸。
<template>
<px-space>
<px-switch size="small"></px-switch>
<px-switch></px-switch>
<px-switch size="large"></px-switch>
</px-space>
</template>开关形状
开关有 'round' 和 'rect' 两种形状，通过 shape 设置。
<template>
<px-space>
<px-switch size="small"></px-switch>
<px-switch size="small" shape="normal"></px-switch>
<px-switch></px-switch>
<px-switch shape="normal"></px-switch>
<px-switch size="large"></px-switch>
<px-switch size="large" shape="normal"></px-switch>
</px-space>
</template>API
SwitchProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| modelValue | boolean | null | 是 | undefined | 开关的值（受控模式），支持 v-model。 | 0.0.3 |
| defaultValue | boolean | null | 是 | undefined | 开关的默认值（非受控模式）。 | 0.0.3 |
| shape | 'round' | 'rect' | 是 | 'round' | 开关的形状。 | 0.0.3 |
| size | 'small' | 'medium' | 'large' | 是 | 'medium' | 开关的尺寸。 | 0.0.3 |
| readonly | boolean | 是 | false | 是否只读。 | 0.0.3 |
| disabled | boolean | 是 | false | 是否禁用。 | 0.0.3 |
| loading | boolean | 是 | false | 是否为加载状态。 | 0.0.3 |
| activeTip | string | 是 | | 选中时的文本提示，位于开关内侧。 | 0.0.3 |
| inactiveTip | string | 是 | | 未选中时的文本提示，位于开关内侧。 | 0.0.3 |
| activeLabel | string | 是 | | 选中时的文本标签，位于开关外侧。 | 0.0.3 |
| inactiveLabel | string | 是 | | 未选中时的文本标签，位于开关外侧。 | 0.0.3 |
| activeColor | string | 是 | | 选中时标签颜色，支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。 | 0.0.3 |
| inactiveColor | string | 是 | | 未选中时标签颜色，支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。 | 0.0.3 |
SwitchEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| update:modelValue | value: boolean | 更新 modelValue 的回调。 | 0.0.3 |
| input | value: boolean, event: InputEvent | 触发开关的回调。 | 0.0.3 |
| change | value: boolean, event: Event | 开关选中状态改变的回调。 | 0.0.3 |
| focus | event: FocusEvent | 聚焦开关的回调。 | 0.0.3 |
| blur | event: FocusEvent | 开关失焦的回调。 | 0.0.3 |
SwitchSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| active-tip | | 选中时的提示，位于开关内侧。 | 0.0.3 |
| inactive-tip | | 未选中时的提示，位于开关内侧。 | 0.0.3 |
| active-label | | 选中时的文本标签，位于开关外侧。 | 0.0.3 |
| inactive-label | | 未选中时的文本标签，位于开关外侧。 | 0.0.3 |
| active-icon | | 选中时的图标。 | 0.0.3 |
| inactive-icon | | 未选中时的图标。 | 0.0.3 |