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 已编译 开发者工具与真机待验证