提供一个简单的 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 | 元素被关闭之后触发的事件 | - |