Toast 组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果，我们为其提供了多种丰富的API。
注意：
由于uni中无法通过js创建元素，所以需要在页面中调用<toast />组件，再通过ref开启
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
以下为不同能力的toast的具体表现
<template> <view> <u-toast ref="uToast"></u-toast> <u-cell-group title-bg-color="rgb(243, 244, 246)"> <u-cell :titleStyle="{fontWeight: 500}" :title="item.title" v-for="(item, index) in list" :key="index" isLink :icon="item.iconUrl" @click="showToast(item)" > </u-cell> </u-cell-group> </view> </template> <script> export default { data() { return { show: false, list: [{ type: 'default', title: '默认主题', message: "锦瑟无端五十弦", iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png' }, { type: 'error', icon: false, title: '失败主题', message: "一弦一柱思华年", iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png' }, { type: 'success', title: '成功主题(带图标)', message: "庄生晓梦迷蝴蝶", iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png' }, { type: 'loading', title: '正在加载', message: "正在加载", iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png' }, { type: 'default', title: '结束后跳转标签页', message: "此情可待成追忆", url: '/pages/componentsB/tag/tag', iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png' } ], } }, computed: { getIcon() { return path => { return 'https://cdn.uviewui.com/uview/example/' + path + '.png'; } }, }, methods: { showToast(params) { this.$refs.uToast.show({ ...params, complete() { params.url && uni.navigateTo({ url: params.url }) } }) } } } </script> <style lang="scss"> .u-page { padding: 0; } .u-cell-icon { width: 36rpx; height: 36rpx; margin-right: 8rpx; } .u-cell-group__title__text { font-weight: bold; } </style>
