uniapp中uview组件库Toast 消息提示 的使用方法

发布时间:2024年01月16日

目录

#基本使用

#配置toast主题

#toast结束跳转URL

#API

#Props

#Params

#Methods


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

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

注意:

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

#基本使用

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

<template>
	<view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		methods: {
			showToast() {
				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					url: '/pages/user/index'
				})
			}
		}
	}
</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(需另外设置isTabtrue)
  • 如果配置了params参数,就会在跳转时自动在URL后面拼接上这些参数,具体用法如下:
this.$refs.uToast.show({
	title: '操作成功',
	url: '/pages/user/index',
	params: {
		id: 1,
		menu: 3
	}
})

#API

#Props

参数说明类型默认值可选值
z-indextoast展示时的z-indexString | Number10090-

#Params

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

参数说明类型默认值可选值
title显示的文本String--
type主题类型,不填默认为defaultStringdefaultprimary / success / error / warning / info
durationtoast的持续时间,单位msNubmer2000-
urltoast结束跳转的url,不填不跳转,优先级高于back参数String--
icon是否显示显示type对应的图标,为false不显示图标Booleantruefalse
positiontoast出现的位置Stringcentertop / bottom
callback?1.3.6toast结束后执行的回调方法Function--
isTabtoast结束后,跳转tab页面时需要配置为trueBooleanfalsetrue
back?1.4.0toast结束后,是否返回上一页,优先级低于url参数Booleanfalsetrue

#Methods

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

方法名说明参数版本
show显示toast,如需一进入页面就显示toast,请在onReady生命周期调用见上方说明-
文章来源:https://blog.csdn.net/m0_72603435/article/details/135632609
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。