提供一个简单的 Toast
,可以传入 icon
、image
来展示不同的效果,另外提供日常使用频繁的三种状态来快速实现效果,页面层级为1090
在 Taro 文件中引入组件
import { AtToast } from 'taro-ui-vue3'
组件依赖的样式文件(仅按需引用时需要)
@import "taro-ui-vue3/dist/style/components/toast.scss";
<AtToast isOpened :text="text" :icon="icon"></AtToast>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
text | 元素的内容 | String | - | - |
icon | icon 的类型 | String | - | - |
image | 元素展示的图片 | String | - | - |
status | 元素的状态 | String | error , loading , success | - |
isOpened | 是否展示元素 | Boolean | - | false |
duration | 元素持续的事件(设置为 0 将不会自动消失) | Number | - | 3000 |
hasMask | 是否存在底部遮罩层(无法点击底部的内容区) | Boolean | - | - |
事件名称 | 说明 | 返回参数 |
---|---|---|
onClick | 元素被点击之后触发的事件 | - |
onClose | 元素被关闭之后触发的事件 | - |