@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-subsection/snake-subsection.vue

@@ -0,0 +1,188 @@
+<template>
+    <view :class="['snake-subsection', `snake-subsection--${mode}`, customClass]" :style="rootStyle" role="tablist">
+        <view v-if="list.length" class="snake-subsection__slider" :style="sliderStyle" />
+        <view
+            v-for="(option, index) in list"
+            :key="index"
+            class="snake-subsection__item"
+            :class="{ 'is-disabled': isDisabled(option) }"
+            :style="itemStyle(option, index)"
+            role="tab"
+            :aria-selected="index === activeIndex"
+            :aria-disabled="isDisabled(option)"
+            :tabindex="isDisabled(option) ? -1 : index === activeIndex ? 0 : -1"
+            @click="select(option, index)"
+            @keydown.left.prevent="selectAdjacent(index, -1)"
+            @keydown.right.prevent="selectAdjacent(index, 1)"
+        >
+            <text class="snake-subsection__text">{{ optionName(option) }}</text>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Subsection
+ * @description 用于在少量互斥选项之间快速切换，支持按钮式滑块和描边分段两种模式。
+ * @see /components/subsection
+ */
+
+import { computed } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import type { SubsectionEmits, SubsectionItem, SubsectionOption, SubsectionProps } from './types';
+
+defineOptions({
+    name: 'Subsection',
+    options: {
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+});
+
+const props = withDefaults(defineProps<SubsectionProps>(), {
+    list: () => [],
+    current: 0,
+    mode: 'button',
+    activeColor: 'var(--snake-color-primary, #06d290)',
+    inactiveColor: 'var(--snake-color-text-secondary, #606266)',
+    fontSize: 28,
+    height: 70,
+    animation: true,
+    bold: true,
+    bgColor: 'var(--snake-color-surface-muted, #f4f6f5)',
+    buttonColor: 'var(--snake-color-surface, #ffffff)',
+    customClass: '',
+    customStyle: ''
+});
+
+const emit = defineEmits<SubsectionEmits>();
+
+const activeIndex = computed(() => {
+    if (!props.list.length) return 0;
+    return Math.max(0, Math.min(props.list.length - 1, Number(props.current) || 0));
+});
+
+const rootStyle = computed(() => [
+    {
+        height: addUnit(props.height, 'rpx'),
+        padding: props.mode === 'button' ? '6rpx' : '0',
+        borderColor: props.mode === 'subsection' ? props.activeColor : 'transparent',
+        backgroundColor: props.mode === 'button' ? props.bgColor : 'transparent'
+    },
+    props.customStyle
+]);
+
+const sliderStyle = computed(() => {
+    const count = Math.max(props.list.length, 1);
+    return {
+        left: props.mode === 'button' ? '6rpx' : '0',
+        width: props.mode === 'button' ? `calc((100% - 12rpx) / ${count})` : `${100 / count}%`,
+        top: props.mode === 'button' ? '6rpx' : '0',
+        bottom: props.mode === 'button' ? '6rpx' : '0',
+        backgroundColor: props.mode === 'button' ? props.buttonColor : props.activeColor,
+        borderRadius: props.mode === 'button' ? '8rpx' : sliderRadius.value,
+        transform: `translateX(${activeIndex.value * 100}%)`,
+        transitionDuration: props.animation ? '0.3s' : '0s'
+    };
+});
+
+const sliderRadius = computed(() => {
+    if (props.list.length <= 1) return '8rpx';
+    if (activeIndex.value === 0) return '8rpx 0 0 8rpx';
+    if (activeIndex.value === props.list.length - 1) return '0 8rpx 8rpx 0';
+    return '0';
+});
+
+function optionName(option: SubsectionOption): string {
+    return typeof option === 'string' ? option : option.name;
+}
+
+function isDisabled(option: SubsectionOption): boolean {
+    return typeof option === 'object' && Boolean((option as SubsectionItem).disabled);
+}
+
+function itemStyle(option: SubsectionOption, index: number) {
+    const selected = index === activeIndex.value;
+    return {
+        color:
+            props.mode === 'subsection' && selected
+                ? 'var(--snake-color-white, #ffffff)'
+                : selected
+                  ? props.activeColor
+                  : props.inactiveColor,
+        borderColor: props.mode === 'subsection' ? props.activeColor : 'transparent',
+        fontSize: addUnit(props.fontSize, 'rpx'),
+        fontWeight: selected && props.bold ? '600' : '400',
+        opacity: isDisabled(option) ? 0.45 : 1
+    };
+}
+
+function select(option: SubsectionOption, index: number) {
+    if (isDisabled(option) || index === activeIndex.value) return;
+    emit('update:current', index);
+    emit('change', index);
+}
+
+function selectAdjacent(index: number, direction: -1 | 1) {
+    for (let offset = 1; offset <= props.list.length; offset += 1) {
+        const target = (index + direction * offset + props.list.length) % props.list.length;
+        const option = props.list[target];
+        if (option && !isDisabled(option)) {
+            select(option, target);
+            return;
+        }
+    }
+}
+</script>
+
+<style scoped>
+.snake-subsection {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    align-items: stretch;
+    overflow: hidden;
+    border: 1rpx solid transparent;
+    border-radius: 10rpx;
+}
+
+.snake-subsection__slider {
+    position: absolute;
+    z-index: 0;
+    transition-property: transform, background-color, border-radius;
+    transition-timing-function: ease;
+}
+
+.snake-subsection__item {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8rpx;
+    border-right: 1rpx solid transparent;
+    line-height: 1.2;
+    text-align: center;
+    transition:
+        color 0.3s ease,
+        opacity 0.2s ease;
+}
+
+.snake-subsection--subsection .snake-subsection__item:not(:last-child) {
+    border-right-color: var(--snake-color-primary, #06d290);
+}
+
+.snake-subsection__item.is-disabled {
+    cursor: not-allowed;
+}
+
+.snake-subsection__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

package/components/snake-subsection/types.ts

@@ -0,0 +1,54 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** SubsectionMode 类型定义。 */
+export type SubsectionMode = 'button' | 'subsection';
+
+/** Subsection 数据项。 */
+export interface SubsectionItem {
+    /** 数据项名称或唯一标识。 */
+    name: string;
+    /** 是否禁用交互。 */
+    disabled?: boolean;
+}
+
+/** Subsection 可选项。 */
+export type SubsectionOption = string | SubsectionItem;
+
+/** Subsection 组件的公开属性。 */
+export interface SubsectionProps {
+    /** 用于渲染的数据列表。 */
+    list?: SubsectionOption[];
+    /** 当前激活项索引。 */
+    current?: number | string;
+    /** 组件展示模式。 */
+    mode?: SubsectionMode;
+    /** 激活状态颜色。 */
+    activeColor?: string;
+    /** 未激活状态颜色。 */
+    inactiveColor?: string;
+    /** 文字尺寸，数值按 rpx 处理。 */
+    fontSize?: UnitValue;
+    /** 组件高度。 */
+    height?: UnitValue;
+    /** animation 配置。 */
+    animation?: boolean;
+    /** 是否使用粗体文字。 */
+    bold?: boolean;
+    /** 背景颜色。 */
+    bgColor?: string;
+    /** button color 配置。 */
+    buttonColor?: string;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+
+/** Subsection 组件的事件契约。 */
+export type SubsectionEmits = {
+    /** change 事件携带的参数。 */
+    change: [index: number];
+    /** update:current 事件携带的参数。 */
+    'update:current': [index: number];
+};

package/components/snake-swiper/snake-swiper.vue

@@ -0,0 +1,229 @@
+<template>
+    <view class="snake-swiper" :class="customClass" :style="rootStyle">
+        <swiper
+            class="snake-swiper__body"
+            :current="currentIndex"
+            :autoplay="autoplay"
+            :interval="interval"
+            :duration="duration"
+            :circular="circular"
+            :previous-margin="margin"
+            :next-margin="effect3d ? margin : nextMargin"
+            @change="change"
+            @animationfinish="finish"
+        >
+            <swiper-item v-for="(item, index) in list" :key="index" class="snake-swiper__item">
+                <view
+                    class="snake-swiper__content"
+                    :style="{
+                        borderRadius: addUnit(actualRadius, 'rpx'),
+                        transform: effect3d && index !== active ? 'scaleY(0.9)' : 'scaleY(1)',
+                        margin: effect3d && index !== active ? '0 20rpx' : 0
+                    }"
+                    @click.stop.prevent="emit('click', index)"
+                >
+                    <image class="snake-swiper__image" :src="source(item)" :mode="imgMode as any" />
+                    <text
+                        v-if="(showTitle || title) && itemTitle(item)"
+                        class="snake-swiper__title"
+                        :style="[titleStyle, { paddingBottom: titlePaddingBottom }]"
+                    >
+                        {{ itemTitle(item) }}
+                    </text>
+                </view>
+            </swiper-item>
+        </swiper>
+        <view v-if="showIndicator" class="snake-swiper__indicator" :class="indicatorClass">
+            <slot name="indicator" :current="active" :total="list.length">
+                <text v-if="mode === 'number'" class="snake-swiper__number">{{ active + 1 }}/{{ list.length }}</text>
+                <view v-else-if="mode !== 'none'" class="snake-swiper__dots" :class="`is-${mode}`">
+                    <view
+                        v-for="(_, index) in list"
+                        :key="index"
+                        class="snake-swiper__dot"
+                        :class="{ 'is-active': index === active }"
+                        :style="{ backgroundColor: index === active ? indicatorActiveColor : indicatorColor }"
+                    />
+                </view>
+            </slot>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Swiper
+ * @description 基于 uni-app swiper 封装，支持图片或对象数据、自定义指示器、标题和 3D 卡片效果。
+ * @see /components/swiper
+ */
+
+import { computed, ref, watch } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import type { SwiperEmits, SwiperItem, SwiperProps } from './types';
+
+defineOptions({ name: 'Swiper', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<SwiperProps>(), {
+    list: () => [],
+    current: 0,
+    height: 250,
+    autoplay: true,
+    interval: 3000,
+    duration: 500,
+    circular: true,
+    indicator: () => ({}),
+    mode: 'round',
+    indicatorPos: 'bottomCenter',
+    indicatorColor: 'rgba(0,0,0,.3)',
+    indicatorActiveColor: 'rgba(255,255,255,.8)',
+    name: 'image',
+    radius: 8,
+    previousMargin: '0px',
+    nextMargin: '0px',
+    effect3d: false,
+    effect3dPreviousMargin: 50,
+    imgMode: 'aspectFill',
+    showTitle: false,
+    bgColor: 'var(--snake-color-bg, #f7f8fa)',
+    titleStyle: '',
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<SwiperEmits>();
+const active = ref(Number(props.current) || 0);
+const currentIndex = computed(() => Number(props.current) || 0);
+watch(
+    () => props.list.length,
+    (length, previousLength) => {
+        if (length !== previousLength) active.value = 0;
+    }
+);
+watch(
+    () => props.current,
+    current => (active.value = Number(current) || 0)
+);
+const actualRadius = computed(() => props.borderRadius ?? props.radius);
+const rootStyle = computed(() => [
+    {
+        height: addUnit(props.height, 'rpx'),
+        borderRadius: addUnit(actualRadius.value, 'rpx'),
+        backgroundColor: props.bgColor
+    },
+    props.customStyle
+]);
+const source = (item: SwiperItem) =>
+    typeof item === 'string' ? item : String(item?.[props.name] ?? item?.image ?? item?.src ?? item?.url ?? '');
+const itemTitle = (item: SwiperItem) => (typeof item === 'string' ? '' : String(item?.title ?? item?.text ?? ''));
+const showIndicator = computed(() => props.indicator !== false);
+const margin = computed(() => (props.effect3d ? addUnit(props.effect3dPreviousMargin, 'rpx') : props.previousMargin));
+const indicatorClass = computed(() => `snake-swiper__indicator--${props.indicatorPos}`);
+const titlePaddingBottom = computed(() => {
+    if (props.mode === 'none') return '12rpx';
+    return props.indicatorPos.startsWith('bottom') ? (props.mode === 'number' ? '60rpx' : '40rpx') : '12rpx';
+});
+function change(event: any) {
+    active.value = Number(event.detail?.current) || 0;
+    emit('change', active.value);
+}
+function finish(event: any) {
+    emit('animationfinish', { current: Number(event.detail?.current) || 0, source: event.detail?.source });
+}
+</script>
+
+<style scoped>
+.snake-swiper,
+.snake-swiper__body,
+.snake-swiper__item {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.snake-swiper {
+    transform: translateY(0);
+}
+.snake-swiper__content {
+    position: relative;
+    box-sizing: content-box;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    transition: all 0.5s;
+}
+.snake-swiper__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+.snake-swiper__title {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 12rpx 24rpx;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 28rpx;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+.snake-swiper__indicator {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 24rpx;
+}
+.snake-swiper__indicator--topLeft {
+    top: 12rpx;
+}
+.snake-swiper__indicator--topCenter {
+    top: 12rpx;
+    justify-content: center;
+}
+.snake-swiper__indicator--topRight {
+    top: 12rpx;
+    justify-content: flex-end;
+}
+.snake-swiper__indicator--bottomLeft {
+    bottom: 12rpx;
+}
+.snake-swiper__indicator--bottomCenter {
+    bottom: 12rpx;
+    justify-content: center;
+}
+.snake-swiper__indicator--bottomRight {
+    bottom: 12rpx;
+    justify-content: flex-end;
+}
+.snake-swiper__dots {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+}
+.snake-swiper__dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 999px;
+    transition:
+        width 0.2s ease,
+        background-color 0.2s ease;
+}
+.snake-swiper__dots.is-round .snake-swiper__dot.is-active {
+    width: 34rpx;
+}
+.snake-swiper__dots.is-rect .snake-swiper__dot,
+.snake-swiper__dots.is-line .snake-swiper__dot {
+    width: 26rpx;
+    height: 8rpx;
+    border-radius: 0;
+}
+.snake-swiper__number {
+    padding: 6rpx 16rpx;
+    border-radius: 999px;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 26rpx;
+    background: rgba(0, 0, 0, 0.3);
+}
+</style>

package/components/snake-swiper/types.ts

@@ -0,0 +1,79 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { ImageMode, StyleValue } from '../../types/global';
+/** Swiper 数据项。 */
+export type SwiperItem = string | Record<string, unknown>;
+/** SwiperIndicatorMode 类型定义。 */
+export type SwiperIndicatorMode = 'round' | 'dot' | 'rect' | 'line' | 'number' | 'none';
+/** SwiperIndicatorPosition 类型定义。 */
+export type SwiperIndicatorPosition = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+/** Swiper 组件的公开属性。 */
+export interface SwiperProps {
+    /** 用于渲染的数据列表。 */
+    list?: SwiperItem[];
+    /** 当前激活项索引。 */
+    current?: number | string;
+    /** 组件高度。 */
+    height?: UnitValue;
+    /** 是否自动播放。 */
+    autoplay?: boolean;
+    /** interval 配置。 */
+    interval?: number;
+    /** 动画持续时间。 */
+    duration?: number;
+    /** circular 配置。 */
+    circular?: boolean;
+    /** indicator 配置。 */
+    indicator?: boolean | Record<string, unknown>;
+    /** 组件展示模式。 */
+    mode?: SwiperIndicatorMode;
+    /** indicator pos 配置。 */
+    indicatorPos?: SwiperIndicatorPosition;
+    /** indicator color 配置。 */
+    indicatorColor?: string;
+    /** indicator active color 配置。 */
+    indicatorActiveColor?: string;
+    /** 数据项名称或唯一标识。 */
+    name?: string;
+    /** 圆角尺寸。 */
+    radius?: UnitValue;
+    /** 圆角尺寸。 */
+    borderRadius?: UnitValue;
+    /** previous margin 配置。 */
+    previousMargin?: string;
+    /** next margin 配置。 */
+    nextMargin?: string;
+    /** effect3d 配置。 */
+    effect3d?: boolean;
+    /** effect3d previous margin 配置。 */
+    effect3dPreviousMargin?: UnitValue;
+    /** 图片裁剪与缩放模式。 */
+    imgMode?: ImageMode;
+    /** show title 配置。 */
+    showTitle?: boolean;
+    /** 标题文本。 */
+    title?: boolean;
+    /** title style 配置。 */
+    titleStyle?: StyleValue;
+    /** 背景颜色。 */
+    bgColor?: string;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+/** SwiperChange 事件详情。 */
+export interface SwiperChangeDetail {
+    /** 当前激活项索引。 */
+    current: number;
+    /** source 配置。 */
+    source?: string;
+}
+/** Swiper 组件的事件契约。 */
+export type SwiperEmits = {
+    /** change 事件携带的参数。 */
+    change: [current: number];
+    /** click 事件携带的参数。 */
+    click: [index: number];
+    /** animationfinish 事件携带的参数。 */
+    animationfinish: [detail: SwiperChangeDetail];
+};

package/components/snake-switch/snake-switch.vue

@@ -0,0 +1,100 @@
+<template>
+    <view
+        class="snake-switch"
+        :class="[customClass, { 'is-disabled': disabled || loading }]"
+        :style="[trackStyle, customStyle]"
+        role="switch"
+        :aria-checked="checked"
+        :aria-disabled="disabled || loading"
+        :tabindex="disabled || loading ? -1 : 0"
+        @click="toggle"
+        @keydown.enter.prevent="toggle($event)"
+        @keydown.space.prevent="toggle($event)"
+    >
+        <view class="snake-switch__thumb" :style="thumbStyle">
+            <snake-loading v-if="loading" :size="numericSize * 0.55" :color="checked ? activeColor : '#909399'" />
+        </view>
+    </view>
+</template>
+<script setup lang="ts">
+/**
+ * @component Switch
+ * @description 切换 boolean、字符串或数字状态，支持加载、禁用、自定义值和短震动反馈。
+ * @see /components/switch
+ */
+
+import { computed, inject } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { formItemKey } from '../snake-form-item/types';
+import SnakeLoading from '../snake-loading/snake-loading.vue';
+import type { SwitchEmits, SwitchProps } from './types';
+defineOptions({ name: 'SnakeSwitch', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<SwitchProps>(), {
+    modelValue: false,
+    activeValue: true,
+    inactiveValue: false,
+    loading: false,
+    disabled: false,
+    activeColor: 'var(--snake-color-primary,#06D290)',
+    inactiveColor: 'var(--snake-color-border,#dcdfe6)',
+    space: 2,
+    vibrateShort: false,
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<SwitchEmits>();
+const formItem = inject(formItemKey, null);
+const checked = computed(() => Object.is(props.modelValue, props.activeValue));
+const resolvedSize = computed(() => {
+    const size = props.size || formItem?.size.value || 50;
+    return size === 'small' ? 40 : size === 'large' ? 60 : size === 'default' ? 50 : size;
+});
+const numericSize = computed(() => Number.parseFloat(String(resolvedSize.value)) || 50);
+const numericSpace = computed(() => Number.parseFloat(String(props.space)) || 0);
+const trackStyle = computed(() => ({
+    width: addUnit(numericSize.value * 1.8, 'rpx'),
+    height: addUnit(resolvedSize.value, 'rpx'),
+    padding: addUnit(props.space, 'rpx'),
+    backgroundColor: checked.value ? props.activeColor : props.inactiveColor
+}));
+const thumbStyle = computed(() => ({
+    width: addUnit(numericSize.value - numericSpace.value * 2, 'rpx'),
+    height: addUnit(numericSize.value - numericSpace.value * 2, 'rpx'),
+    transform: checked.value ? `translateX(${addUnit(numericSize.value * 0.8, 'rpx')})` : 'translateX(0)'
+}));
+function toggle(event: unknown) {
+    emit('click', event);
+    if (props.disabled || props.loading) return;
+    const next = checked.value ? props.inactiveValue : props.activeValue;
+    if (props.vibrateShort && typeof uni !== 'undefined' && uni.vibrateShort)
+        uni.vibrateShort({ fail: () => undefined });
+    emit('update:modelValue', next);
+    emit('change', next);
+    void formItem?.notify('change');
+}
+</script>
+<style scoped>
+.snake-switch {
+    display: inline-flex;
+    box-sizing: content-box;
+    align-items: center;
+    border-radius: 999px;
+    transition: background-color 0.2s;
+}
+.snake-switch.is-disabled {
+    opacity: 0.55;
+}
+.snake-switch:focus-visible {
+    outline: 2px solid var(--snake-color-primary, #06d290);
+    outline-offset: 4rpx;
+}
+.snake-switch__thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 2rpx 8rpx rgba(15, 30, 24, 0.18);
+    transition: transform 0.2s;
+}
+</style>

package/components/snake-switch/types.ts

@@ -0,0 +1,41 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+import type { FormSize } from '../snake-form/types';
+/** SwitchValue 类型定义。 */
+export type SwitchValue = boolean | string | number;
+/** Switch 组件的公开属性。 */
+export interface SwitchProps {
+    /** 双向绑定的当前值。 */
+    modelValue?: SwitchValue;
+    /** active value 配置。 */
+    activeValue?: SwitchValue;
+    /** inactive value 配置。 */
+    inactiveValue?: SwitchValue;
+    /** 是否显示加载状态。 */
+    loading?: boolean;
+    /** 是否禁用交互。 */
+    disabled?: boolean;
+    /** 组件尺寸。 */
+    size?: UnitValue | FormSize;
+    /** 激活状态颜色。 */
+    activeColor?: string;
+    /** 未激活状态颜色。 */
+    inactiveColor?: string;
+    /** space 配置。 */
+    space?: UnitValue;
+    /** vibrate short 配置。 */
+    vibrateShort?: boolean;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+/** Switch 组件的事件契约。 */
+export type SwitchEmits = {
+    /** update:modelValue 事件携带的参数。 */
+    'update:modelValue': [value: SwitchValue];
+    /** change 事件携带的参数。 */
+    change: [value: SwitchValue];
+    /** click 事件携带的参数。 */
+    click: [event: unknown];
+};