zx-toast 组件

介绍

zx-toast 是一个基于 uni-app 的跨端（H5/小程序/APP）消息提示组件，支持多种主题、位置、遮罩、加载、手动/自动关闭等功能，无需依赖浏览器特有 DOM。

基本用法

<template>
  <zx-toast ref="toast" />
  <button @click="showToast">显示Toast</button>
</template>

<script setup>
import { ref } from 'vue';
const toast = ref(null);
function showToast() {
  toast.value.show({ message: '操作成功', type: 'success' });
}
</script>

属性说明

| 属性名 | 类型 | 默认值 | 说明 | | ----------- | --------------- | ---------- | ---------------------------- | | type | String | default | 主题类型：success、error、warning、primary、default、loading | | zIndex | String/Number | 10090 | 层级 | | loading | Boolean | false | 是否加载中 | | message | String/Number | '' | 显示的文字内容 | | icon | String | '' | 图标名或图片路径 | | overlay | Boolean | false | 是否显示遮罩 | | position | String | center | 位置：top、center、bottom | | params | Object | {} | 跳转参数 | | duration | String/Number | 2000 | 展示时间(ms)，0为手动关闭 | | isTab | Boolean | false | 跳转是否为tab页面 | | url | String | '' | toast消失后跳转页面 | | back | Boolean | false | toast结束后返回上一页 | | customStyle | Object | {} | 内容自定义样式 | | show | Boolean | false | 是否显示（受控） |

方法

show(options)

显示toast。options为对象，支持上述所有属性。

hide()

隐藏toast。

事件

无（如需进入页面即显示toast，请在onReady生命周期调用show）。

示例

详见 src/pages/components/toast/index.vue：

• 普通提示
• 成功/失败/警告/主要类型
• 加载中（手动关闭）
• 顶部/底部/居中显示
• 带遮罩
• 自定义图标
• 手动关闭

跨端兼容说明

• 组件不依赖window、document等浏览器特有对象。
• 使用 <view>、<text> 等通用标签，样式兼容H5、小程序、APP。
• 跳转、返回等操作使用 uni.navigateTo、uni.navigateBack。

依赖

• 依赖 zx-overlay、zx-icon、zx-loading-icon、zx-gap 组件，请确保已注册。

联系与反馈

如有问题或建议，请提交 issue。