UniApp 组件 · 实验
UGButton 按钮
用于触发主要操作、次级操作与危险操作的按钮组件。
组件预览
以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。
使用方式
配置 easycom 后直接使用 <ug-button>，无需在页面脚本中导入组件。
vue
<script setup lang="ts">
function save() {
// 执行业务保存
}
</script>
<template>
<ug-space size="sm" wrap>
<ug-button @click="save">保存</ug-button>
<ug-button variant="outline">取消</ug-button>
<ug-button variant="ghost" tone="danger">删除</ug-button>
</ug-space>
</template>
easycom 公开入口：@ug666/ui-uniapp/components/ug-button/ug-button.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| variant | 'solid' | 'outline' | 'ghost' | 'solid' | 按钮的视觉层级。 |
| tone | 'primary' | 'neutral' | 'danger' | 'primary' | 按钮的语义色调。 |
| size | 'sm' | 'md' | 'lg' | Provider | 按钮尺寸，未传时读取 Provider。 |
| block | boolean | false | 是否占满父容器宽度。 |
| loading | boolean | false | 显示原生加载状态并阻止 click。 |
| loadingText | string | — | 加载时替换默认插槽的文字。 |
| disabled | boolean | Provider | 禁用按钮并阻止 click。 |
| formType | 'submit' | 'reset' | — | 透传 UniApp button 的表单行为。 |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
| click | event | 按钮可用且非 loading 时触发。 |
注意事项
- 业务提交和请求状态由页面管理，组件只负责 UI 与事件。
- loading 或 disabled 时不会触发业务 click。
平台边界
总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。
MP-WEIXIN 已编译
开发者工具与真机待验证