@tanzhenxing/zx-toast NPM

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	是否显示（受控）