Toast 轻提示

Feedback · Display component

Lightweight short messages.

On-demand importwbbb-ui/components/toast

Basic Usage

Example code

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

function open() { showToast('Saved successfully') }
</script>

<template><button @click="open">Open Toast</button></template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultContent

Service components use <wbbb-overlay-host /> for library visuals and fall back to uni-app native capability without a host.

API Reference

Props

Property	Description	Type	Default	Required
duration	Sets the display or animation duration in milliseconds.	number	1800	No
icon	Sets the icon name or icon content.	'success' \| 'error' \| 'loading' \| 'none'	'none'	No
message	Provides the notification or feedback message.	string	''	No
modelValue	Provides the current value used by v-model.	boolean	false	No
zIndex	Sets the stacking order of the component.	number	1100	No

Events

• update:modelValue
• close

Slots

• default

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Service APIs can be used without full installation and are queued by Overlay Host.