uview-plus

# Toast 消息提示

Toast 组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果，我们为其提供了多种丰富的API。

注意：

由于uni中无法通过js创建元素，所以需要在页面中调用<toast />组件，再通过ref开启

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

以下为不同能力的toast的具体表现

<template>
	<view>
		<up-toast ref="uToastRef"></up-toast>
		<up-cell-group title-bg-color="rgb(243, 244, 246)">
			<up-cell
				:titleStyle="{fontWeight: 500}"
				:title="item.title"
				v-for="(item, index) in list"
				:key="index"
				isLink
				:icon="item.iconUrl"
				@click="showToast(item)"
			>
			</up-cell>
		</up-cell-group>
	</view>
</template>

<script setup>  
import { ref, computed } from 'vue';  
  
// 创建响应式数据  
const show = ref(false);  
const list = ref([  
  	{
		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'
	}
]);  
  
// 计算属性  
const getIcon = computed(() => {  
  return path => {  
    return 'https://cdn.uviewui.com/uview/example/' + path + '.png';  
  }  
});  
  
// 方法
const uToastRef = ref(null)
function showToast(params) {  
  uToastRef.value.show({  
    ...params,  
    complete() {  
      params.url && uni.navigateTo({  
        url: params.url  
      });  
    }  
  });  
}  
</script>

<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.uToastRef.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>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Params

这些参数为通过ref调用<toast/>组件内部的show方法时，需要传递参数

参数 说明 类型 默认值 可选值
loading 是否加载中 Boolean false true
message 显示的文本 String | Number - -
icon 图标，或者绝对路径的图片 String - -
position toast出现的位置 String center top / bottom
type 主题类型 String - -
params 跳转的参数 Object - -
duration 展示时间，单位ms, 值为-1时不自动关闭 String | Number 2000 -
complete 执行完后的回调函数 Function null -

# Methods

方法是通过ref调用的，参见上方说明 注意：所有有关ref的调用，都不能在页面的onLoad生命周期调用，因为此时组件尚未创建完毕，会报错，应该在onReady生命周期调用。

方法名 说明 参数 版本
show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用 见上方说明 -

← NoticeBar 滚动通知 →