uView

# Toast 消息提示

此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方，具体表现在：

  • uView的toast有5种主题可选
  • 可以配置toast结束后，跳转相应URL
  • 目前没有加载中的状态，请用uni的uni.showLoading，这个需求uni已经做得很好

注意：

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

# 基本使用

以下为一个模拟登录成功后，弹出toast提示，并在一定时间(默认2000ms)后，自动跳转页面到个人中心页(也可以配置跳转的参数)的示例

# 选项式用法

<template>
	<view>
		<u-toast ref="uToast1" />
		<button @click="showToast1">显示成功提示</button>
		<button @click="showToast2">显示失败提示</button>
		<button @click="showToast3">显示警告提示</button>
		<button @click="showToast4">显示普通提示</button>
	</view>
</template>

<script>
	export default {
		methods: {
			showToast1() {
				this.$refs.uToast1.show({
					title: '我是成功信息',
					type: 'success'
				})
			},
			showToast2() {
				this.$refs.uToast1.show({
					title: '我是失败信息',
					type: 'error'
				})
			},
			showToast3() {
				this.$refs.uToast1.show({
					title: '我是警告信息',
					type: 'warning'
				})
			},
			showToast4() {
				this.$refs.uToast1.show({
					title: '我是普通信息',
					type: 'default'
				})
			}
		}
	}
</script>

# 组合式用法

<template>
	<view>
		<u-toast ref="uToast1" />
		<button @click="showToast1">显示成功提示</button>
		<button @click="showToast2">显示失败提示</button>
		<button @click="showToast3">显示警告提示</button>
		<button @click="showToast4">显示普通提示</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const uToast1 = ref(null);
	const showToast1 = () => {
		uToast1.value.show({
			title: '我是成功信息',
			type: 'success'
		})
	}
	const showToast2 = () => {
		uToast1.value.show({
			title: '我是失败信息',
			type: 'error'
		})
	}
	const showToast3 = () => {
		uToast1.value.show({
			title: '我是警告信息',
			type: 'warning'
		})
	}
	const showToast4 = () => {
		uToast1.value.show({
			title: '我是普通信息',
			type: 'default'
		})
	}
</script>

# 配置toast主题

一共有6种主题可选，如下：

  • default-灰黑色，最普通的场景，此为默认主题，可以不用填type参数
  • error-红色，代表错误
  • success-绿色，代表成功
  • warning-黄色，代表警告
  • info-灰色，比default浅一点
  • primary-蓝色，uView的主色调

除了default状态，其他5种主题，都是默认带有一个左边的图标，可以通过配置icon参数为none来取消

this.$refs.uToast.show({
	title: '操作成功',
	// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
	// type: 'success', 
	// 如果不需要图标，请设置为false
	// icon: false
})

# toast结束跳转URL

  • 如果配置了url参数，在toast结束的时候，就会用uni.navigateTo(默认)或者uni.switchTab(需另外设置isTab为true)
  • 如果配置了params参数，就会在跳转时自动在URL后面拼接上这些参数，具体用法如下：
this.$refs.uToast.show({
	title: '操作成功',
	url: '/pages/user/index',
	params: {
		id: 1,
		menu: 3
	}
})

# API

# Props

参数 说明 类型 默认值 可选值
z-index toast展示时的z-index值 String | Number 10090 -

# Params

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

参数 说明 类型 默认值 可选值
title 显示的文本 String - -
type 主题类型，不填默认为default String default primary / success / error / warning / info
duration toast的持续时间，单位ms Nubmer 2000 -
url toast结束跳转的url，不填不跳转，优先级高于back参数 String - -
icon 是否显示显示type对应的图标，为false不显示图标 Boolean true false
position toast出现的位置 String center top / bottom
callback toast结束后执行的回调方法 Function - -
isTab toast结束后，跳转tab页面时需要配置为true Boolean false true
back toast结束后，是否返回上一页，优先级低于url参数 Boolean false true

# Methods

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

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

← NoticeBar 滚动通知 →