qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Toast 轻提示


提供一个简单的 Toast,可以传入 iconimage 来展示不同的效果,另外提供日常使用频繁的三种状态来快速实现效果,页面层级为1090

使用指南

在 Taro 文件中引入组件

import { AtToast } from 'taro-ui-vue3'

组件依赖的样式文件(仅按需引用时需要)

@import "taro-ui-vue3/dist/style/components/toast.scss";

一般用法

<AtToast isOpened :text="text" :icon="icon"></AtToast>

AtToast 参数

参数说明类型可选值默认值
text元素的内容String--
iconicon 的类型String--
image元素展示的图片String--
status元素的状态Stringerror, loading, success-
isOpened是否展示元素Boolean-false
duration元素持续的事件(设置为 0 将不会自动消失)Number-3000
hasMask是否存在底部遮罩层(无法点击底部的内容区)Boolean--

AtToast 事件

事件名称说明返回参数
onClick元素被点击之后触发的事件-
onClose元素被关闭之后触发的事件-