UniApp 组件 · 实验

UGSwitch 开关

用于切换二元状态的开关组件。

组件预览

以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。

使用方式

配置 easycom 后直接使用 <ug-switch>，无需在页面脚本中导入组件。

vue

<script setup lang="ts">
import { ref } from 'vue'

const notificationsEnabled = ref(true)

function savePreference(value: boolean) {
  // 保存业务偏好
}
</script>

<template>
  <ug-switch
    v-model="notificationsEnabled"
    label="接收版本通知"
    @change="savePreference"
  />
</template>

easycom 公开入口：@ug666/ui-uniapp/components/ug-switch/ug-switch.vue

属性

属性	类型	默认值	说明
modelValue	boolean	false	通过 v-model 管理的开关值。
disabled	boolean	Provider	禁用原生开关。
size	'sm' \| 'md' \| 'lg'	Provider	通过缩放原生开关设置尺寸。
activeColor	string	Token primary	开启时的原生颜色。
label	string	—	开关旁的文字标签。

事件

事件	参数	说明
update:modelValue	value: boolean	开关变化后更新 v-model。
change	value: boolean	返回新的布尔值。

注意事项

业务持久化由 change 回调所在页面处理。
尺寸依赖原生 switch 的平台表现，仍需微信开发者工具和真机验收。

平台边界

总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。

MP-WEIXIN 已编译开发者工具与真机待验证