组件：通知提醒框

通知提醒框组件用于在页面角落显示临时通知消息，支持信息、成功、警告、错误四种类型，可自定义标题、内容、位置、显示时长等，并支持单击和关闭回调。适用于操作结果反馈、系统通知、状态提醒等场景。

典型使用场景：

  • 操作成功/失败反馈（保存成功、删除失败）
  • 系统通知（新消息、更新提醒）
  • 表单提交结果（注册成功、登录失败）
  • 后台管理操作反馈（数据导入结果、配置生效）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作属性/方法示例
设置通知标题标题通知提醒框1.标题 = "操作成功"
设置通知内容内容通知提醒框1.内容 = "数据已保存"
设置通知类型类型通知提醒框1.类型 = "success"
设置显示位置位置通知提醒框1.位置 = "bottomLeft"
设置自动关闭时长（秒）显示时长通知提醒框1.显示时长 = 3
显示通知显示(父容器)通知提醒框1.显示()
手动关闭通知关闭()通知提醒框1.关闭()
设置单击回调置通知被单击回调(回调函数)通知提醒框1.置通知被单击回调((源对象) => { ... })
设置关闭回调置通知被关闭回调(回调函数)通知提醒框1.置通知被关闭回调((源对象) => { ... })

样式美化参考

通知提醒框的外观可通过以下属性进行自定义：

  • 类型颜色：不同 类型 会赋予不同的颜色方案（如 success 为绿色，error 为红色），背景色和边框色由类型决定。
  • 标题与内容：标题 以加粗显示，内容 为普通文本，可通过继承的 字体大小（建议 "14px"）调整内容文字大小。
  • 位置：位置 决定通知出现在屏幕的哪个角落，默认 "topRight"。
  • 自动关闭：显示时长 控制通知自动消失的时间（秒），设为 0 则不会自动关闭，需用户手动点击关闭或调用 关闭()。
  • 圆角与阴影：可通过继承的 边框圆角（建议 "8px"）和 内联样式 添加阴影效果。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-notification {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px 20px;
    font-size: 14px;
}

在代码中应用样式类：通知提醒框1.添加样式类("my-notification")

基础示例

创建一个右上角的成功通知，4.5 秒后自动关闭。

变量 通知提醒框1 = 创建 通知提醒框()
通知提醒框1.标题 = "操作成功"
通知提醒框1.内容 = "您的数据已保存成功！"
通知提醒框1.类型 = "success"
通知提醒框1.位置 = "topRight"
通知提醒框1.显示时长 = 4.5

通知提醒框1.置通知被单击回调((源对象) => {
    弹出提示("通知被点击")
})

通知提醒框1.显示()

综合示例：表单提交反馈

本示例模拟一个表单提交操作，根据提交结果显示不同位置和类型的通知。

' ========== 创建表单 ==========
变量 表单容器 = 创建 绝对布局()
表单容器.左边 = 50
表单容器.顶边 = 50
表单容器.宽度 = 360
表单容器.背景颜色 = "#ffffff"
表单容器.边框 = "1px solid #e8e8e8"
表单容器.边框圆角 = "12px"
表单容器.内边距 = "24px"
添加组件(表单容器)

' 标题
变量 标题 = 创建 标签()
标题.文本 = "📝 提交反馈"
标题.字体大小 = "18px"
标题.字体粗细 = "bold"
标题.内边距 = "0 0 16px 0"
表单容器.添加组件(标题)

' 内容输入框
变量 内容标签 = 创建 标签()
内容标签.文本 = "反馈内容"
内容标签.字体大小 = "14px"
内容标签.文本颜色 = "#666"
内容标签.内边距 = "8px 0 4px"
表单容器.添加组件(内容标签)

变量 内容输入 = 创建 编辑框()
内容输入.宽度 = 312
内容输入.高度 = 100
内容输入.提示文本 = "请输入您的反馈"
内容输入.边框 = "1px solid #d9d9d9"
内容输入.边框圆角 = "6px"
内容输入.内边距 = "8px 12px"
内容输入.字体大小 = "14px"
表单容器.添加组件(内容输入)

' 提交按钮
变量 提交按钮 = 创建 按钮()
提交按钮.文本 = "提交反馈"
提交按钮.宽度 = 312
提交按钮.高度 = 44
提交按钮.背景颜色 = "#1890ff"
提交按钮.文本颜色 = "#ffffff"
提交按钮.边框圆角 = "6px"
提交按钮.字体大小 = "16px"
表单容器.添加组件(提交按钮)

' ========== 提交逻辑 ==========
提交按钮.置被单击回调((源对象) => {
    变量 内容 = 删首尾空(内容输入.内容)
    如果(内容 == "")
        ' 显示警告通知（左下角）
        变量 通知 = 创建 通知提醒框()
        通知.标题 = "提示"
        通知.内容 = "请填写反馈内容"
        通知.类型 = "warning"
        通知.位置 = "bottomLeft"
        通知.显示时长 = 3
        通知.显示()
        返回
    结束 如果
    
    ' 模拟提交过程（禁用按钮）
    提交按钮.禁用 = 真
    提交按钮.文本 = "提交中..."
    
    延时执行(() => {
        提交按钮.禁用 = 假
        提交按钮.文本 = "提交反馈"
        
        ' 模拟提交成功或失败（随机）
        变量 是否成功 = 取随机整数(0, 1) == 1
        如果(是否成功)
            ' 成功通知（右上角）
            变量 成功通知 = 创建 通知提醒框()
            成功通知.标题 = "提交成功"
            成功通知.内容 = "您的反馈已收到，感谢您的支持！"
            成功通知.类型 = "success"
            成功通知.位置 = "topRight"
            成功通知.显示时长 = 5
            成功通知.置通知被单击回调((源对象) => {
                弹出提示("查看详情")
            })
            成功通知.显示()
            内容输入.内容 = ""  ' 清空
        否则
            ' 错误通知（右下角）
            变量 失败通知 = 创建 通知提醒框()
            失败通知.标题 = "提交失败"
            失败通知.内容 = "网络异常，请稍后重试"
            失败通知.类型 = "error"
            失败通知.位置 = "bottomRight"
            失败通知.显示时长 = 4
            失败通知.显示()
        结束 如果
    }, 1500)
})

属性详解

标题

  • 类型： 文本型
  • 说明： 设置或获取通知的标题文本，以加粗形式显示在内容上方。若设置为空字符串 ""，则标题区域隐藏，只显示内容。

内容

  • 类型： 文本型
  • 说明： 设置或获取通知的主体内容文本，为普通文本（不支持 HTML）。

类型

  • 类型： 文本型
  • 说明： 设置或获取通知的类型，决定通知的样式（颜色、图标等）。可选值：
    • "info"（默认）：信息类（蓝色）
    • "success"：成功类（绿色）
    • "warning"：警告类（橙色）
    • "error"：错误类（红色）

显示时长

  • 类型： 数值型
  • 说明： 设置或获取通知在自动关闭前停留的秒数。设为 0 表示不自动关闭，需用户手动关闭或调用 关闭()。默认 4.5。

位置

  • 类型： 文本型
  • 说明： 设置或获取通知在屏幕中显示的位置。可选值：
    • "topRight"（默认）：右上角
    • "topLeft"：左上角
    • "bottomRight"：右下角
    • "bottomLeft"：左下角

函数详解

显示(父容器)

  • 功能： 将通知添加到页面并显示（触发展开动画）。每次调用都会创建一个新的通知实例（多个通知可同时显示）。
  • 参数： 父容器（可选），可以是视图组件或原生 DOM 元素，默认为 body。通常无需指定。
  • 返回值： 无。
  • 示例： 通知提醒框1.显示()

关闭()

  • 功能： 手动关闭当前通知（触发展开动画反向），并从 DOM 中移除。如果通知已自动关闭或未显示，调用无效果。
  • 返回值： 无。
  • 示例： 通知提醒框1.关闭()

置通知被单击回调(回调函数)

  • 功能： 设置通知被单击时的回调函数。无论点击通知的哪个区域（标题或内容），都会触发。
  • 参数： 回调函数，格式为 (源对象) => { ... }，源对象 为当前通知组件实例。
  • 返回值： 无。
  • 示例： 
    通知提醒框1.置通知被单击回调((源对象) => {
    弹出提示("点击了通知")
})

置通知被关闭回调(回调函数)

  • 功能： 设置通知被关闭时的回调函数。无论是自动关闭还是手动调用 关闭()，都会触发。
  • 参数： 回调函数，格式为 (源对象) => { ... }。
  • 返回值： 无。
  • 示例： 
    通知提醒框1.置通知被关闭回调((源对象) => {
    调试输出("通知已关闭")
})

事件说明

通知被单击(源对象)

  • 功能： 与 置通知被单击回调 等效，适用于设计文件（.spldg）中定义的组件。
  • 示例： 
    事件 通知提醒框1.通知被单击(源对象)
    调试输出("通知被单击")
结束 事件

通知被关闭(源对象)

  • 功能： 与 置通知被关闭回调 等效，适用于设计文件。
  • 示例： 
    事件 通知提醒框1.通知被关闭(源对象)
    调试输出("通知已关闭")
结束 事件

⚠️ 注意事项

  1. 每次显示创建新实例：每次调用 显示() 都会创建一个新的通知实例，可同时显示多个通知。如需复用，建议每次新建通知对象。
  2. 自动关闭计时：显示时长 从通知显示时开始计时，鼠标悬停在通知上会暂停计时（默认行为），移出后继续。
  3. 关闭回调触发：自动关闭和手动 关闭() 都会触发 置通知被关闭回调。
  4. 单击回调与关闭：单击通知会触发 置通知被单击回调，但不会自动关闭（除非手动在回调中调用 关闭()）。
  5. 类型与图标：不同类型的通知会自动显示对应的图标（如成功为 ✓，错误为 ✕），无需额外设置。
  6. 位置堆叠：多个通知在同一位置显示时会纵向堆叠，后出现的在上方（或根据位置不同而不同）。
  7. 父容器：默认添加到 body，若指定其他父容器，通知将相对于该容器定位（但建议使用默认，确保覆盖全屏）。
  8. 销毁：通知在关闭后会自动从 DOM 中移除，无需手动销毁。但若想提前移除可调用 关闭()。
  9. 样式定制：通知的样式（背景、边框、字体等）可通过 CSS 类或继承属性覆盖，但注意 类型 会覆盖背景色，需确保自定义样式优先级更高。

相关文档

  • 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
  • 文档其它通用类组件_气泡提示框 —— 类似提示组件
  • 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、条件判断等
  • 文档综合演示：表单提交反馈 —— 实际应用示例