UniApp 组件 · 实验
UGAlert 提示
强调型提示横幅,适合信息提醒、警告与错误反馈。
组件预览
以下画面来自同一组件源码的 H5 构建,用于检查内容、状态和主题;MP-WEIXIN 最终外观仍以开发者工具和真机为准。
使用方式
配置 easycom 后直接使用 <ug-alert>,无需在页面脚本中导入组件。
vue
<template>
<ug-alert
tone="warning"
title="连接不稳定"
description="部分内容可能延迟更新,请稍后重试。"
closable
@close="hideNotice"
/>
</template>
easycom 公开入口:@ug666/ui-uniapp/components/ug-alert/ug-alert.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| tone | 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 提示的语义色调。 |
| title | string | — | 提示标题,也可用 title 插槽替换。 |
| description | string | — | 默认说明文字;默认插槽可承载自定义内容。 |
| closable | boolean | false | 显示关闭操作,但不在组件内部隐藏提示。 |
| closeLabel | string | '关闭提示' | 关闭操作的可访问名称。 |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
| close | event | 点击关闭操作时通知业务层。 |
注意事项
- Alert 用于持续可见的页面内提示,不替代 Toast。
- 关闭事件只表达用户意图,显示状态由业务层管理。
平台边界
总览中的画面来自同一组件源码的 H5 构建,只用于辅助浏览;小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。
MP-WEIXIN 已编译
开发者工具与真机待验证