消息通知 Notify

反馈 · 展示组件

页面顶部通知

按需导入wbbb-ui/components/notify

基础用法

示例代码

<script setup lang="ts">
import { showNotify } from 'wbbb-ui/services/notify'

function open() { showNotify('保存成功') }
</script>

<template><button @click="open">打开消息通知</button></template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

默认主色成功警告危险信息

服务型组件需在应用根部挂载 <wbbb-overlay-host />；未挂载时会回退到 uni-app 原生能力。

API 参考

属性（Props）

属性	说明	类型	默认值	必填
duration	设置展示或动画时长，单位为毫秒。	number	2200	否
message	提供通知或反馈消息内容。	string	''	否
modelValue	提供 v-model 使用的当前值。	boolean	false	否
type	设置组件的语义类型或样式变体。	Exclude<WbbbType, 'default'>	'info'	否
zIndex	设置组件的层叠层级。	number	1000	否

事件（Events）

• update:modelValue
• close

插槽（Slots）

• default

双向绑定

支持 v-model（modelValue）。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：服务调用可独立于全量安装使用，并由 Overlay Host 管理队列与视觉层级。