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

目录

#基本使用

#配置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生命周期调用见上方说明-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/627741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统——yum仓库及NFS共享

目录 一、yum仓库 1.yum简介 2.yum实现过程 3.如何实现安装服务 4.yum配置文件及命令 4.1yum配置文件 4.1.1主配置文件 4.1.2仓库设置文件 4.1.3日志文件 4.2yum命令详解 4.2.1查询 4.2.2yum安装升级 4.2.3软件卸载 4.2.4操作安装历史记录 5.搭建本地yum仓库 5…

【分布式技术】分布式存储ceph部署

目录 一、存储的介绍 单机存储设备 单机存储的问题 商业存储 分布式存储 二、分布式存储 什么是分布式存储 分布式存储的类型 三、ceph简介 四、ceph的优点 五、ceph的架构 六、ceph的核心组件 七、OSD存储后端 八、Ceph 数据的存储过程 九、Ceph 版本发行生命周…

NFS的共享与挂载

一、NFS网络文件服务 1.1简介 NFS&#xff08;Network File System 网络文件服务&#xff09; 文件系统&#xff08;软件&#xff09;文件的权限 NFS 是一种基于 TCP/IP 传输的网络文件系统协议&#xff0c;最初由 Sun 公司开发。 通过使用 NFS 协议&#xff0c;客户机可以像访…

【数据库8.0备份还原】之Percona XtraBackup

目录 Percona XtraBackup备份数据库1、Percona XtraBackup的介绍2、Percona XtraBackup安装3、Percona XtraBackup8.0的使用1.全库备份和还原2.增量备份和还原3.差异备份和还原4.差异备份和增量备份的区别5.压缩备份和还原 Percona XtraBackup备份数据库 yum源安装&#xff1a…

Spring基础属性一览:注释、对象装配、作用域、生命周期

在Spring中想要更简单的存储和读取对象的核心是使用注解&#xff0c;也就是我们接下来要学的Spring中相关注解。 之前我们存储Bean时&#xff0c;需要在自己添加的配置文件中添加一行bean才行&#xff1a; 而现在我们只需要一个注解就可以替代之前要写的一行配置的繁琐了。 …

消息队列的作用与使用场景?

一、消息队列的作用 队列的主要作用是消除高并发访问高峰&#xff0c;加快网站的响应速度。 在不使用消息队列的情况下&#xff0c;用户的请求数据直接写入数据库&#xff0c;在高并发的情况下&#xff0c;会对数据库造成巨大的压力&#xff0c;同时也使得系统响应延迟加剧。 …

基恩士PLC编程kv7000软件KV-STUDIO V11.63从入门到精通学习资料

恩士PLC软件KV-STUDIO V11.63是一款用于编程和配置基恩士PLC的软件。它提供了一个直观的界面&#xff0c;使用户能够轻松地创建和编辑PLC程序&#xff0c;并进行在线调试和监视。该软件还具有丰富的功能&#xff0c;包括数据记录、报警管理、远程访问等。此外&#xff0c;KV-ST…

HDFS WebHDFS 读写文件分析及HTTP Chunk Transfer Encoding相关问题探究

文章目录 前言需要回答的首要问题DataNode端基于Netty的WebHDFS Service的实现基于重定向的文件写入流程写入一个大文件时WebHDFS和Hadoop Native的块分布差异 基于重定向的数据读取流程尝试读取一个小文件尝试读取一个大文件 读写过程中的Chunk Transfer-Encoding支持写文件使…

《佛法修学概要》期中座谈(三)

大乘佛教&#xff0c;有很多的法门可以来修学。古德把整个大乘佛教的修学分成两个重点&#xff1a;一个叫作理观&#xff1b;一个叫作事修。不管你是什么法门&#xff0c;就理观跟事修两个重点。理观是属于对真理的观察&#xff0c;事修是法门的实际操作。 理观跟事修的关系&a…

postman 简单测试(二)

接着上一节 https://blog.csdn.net/myy2012/article/details/135616719 1.Tests的简单使用&#xff08;后置处理器&#xff09; 具体的截图是每一步操作后得来的&#xff0c;记录方便自己以后查阅&#xff0c;也希望能帮助到有缘人。 1.1 把返回值存入到环境变量中&#xff…

protobuf学习日记 | 初识protobuf

目录 前言 一、序列化与反序列化 二、protobuf是什么 三、protobuf的使用特点 四、快速上手 1、proto文件编写 2、编译proto文件 3、序列化与反序列化的使用 前言 这是小编新开的一个栏目&#xff0c;为了记录自己在学习ProtoBuf的历程&#xff0c;也希望能帮助大家&am…

Center项目创建——数据初始化(Linux/Windows版本)

本博客主要讲述Center的模块安装配置和数据初始化 1、定义安装Install函数&#xff0c;IP地址由makefile自动传入&#xff0c;也就是用户自动传入 bool Install(std::string ip); 2、编写Install函数 #define CENTER_CONF "ip bool XCenter::Install(std::string ip)…

亚马逊店飞飞ERP系统,跟卖+铺货+物流发货模式综合一体的ERP系统

跨境电商亚马逊&#xff0c;目前为止电商行业比较靠前的电商平台&#xff01;那么有人做电商&#xff0c;就会有人出单&#xff0c;有人出单就会有中转仓需求&#xff0c;代打包&#xff0c;代贴单&#xff01;那么这一切都是有一套逻辑完善的ERP来完成&#xff01;前端通过授权…

iptables使用

iptables简介 iptables 是 Linux 防火墙系统的重要组成部分&#xff0c;iptables 的主要功能是实现对网络数据包进出设备及转发的控制。当数据包需要进入设备、从设备中流出或者由该设备转发、路由时&#xff0c;都可以使用 iptables 进行控制。 iptables 是集成在 Linux 内核…

将.NET应用转换成Window服务

写在前面 本文介绍了将.NET8.0应用程序转换成Windows服务。 需要在NuGet中获取并安装&#xff1a;Microsoft.Extensions.Hosting.WindowsServices 包 代码实现 using System.Runtime.InteropServices; using WorkerService1;public class Program {public static void Main…

Kafka 简介

目录 1、概念介绍 Kafka 由来 ZooKeeper Kafka 特性 Kafka 使用场景 Kafka 复制备份 2、Kafka 架构 Broker Topic Producer Partition Consumers Consumer Group Distribution 1、概念介绍 Kafka 由来 Kafka 是最初由 Linkedin 公司开发&#xff0c;是一个分布…

aigc修复美颜学习笔记

目录 GFPGAN进行图像人脸修复 美颜 修复畸形手势 GFPGAN进行图像人脸修复 原文&#xff1a;本地使用GFPGAN进行图像人脸修复_人相修复处理网页 csdn-CSDN博客 人脸修复 1.下载项目和权重文件 2.部署环境 3.下载权重文件 4.运行代码 5.网页端体验 首先来看一下效果图 1.下…

uni-app的项目创建和环境搭建

uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#xff08;微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝&#xff09;、快应用等多个平台。 第一步…

clip安装使用教程

1.配置环境 安装依赖 pip install transformers pip install torch 看缺失什么包自己先安装好 2.安装clip 进入https://github.com/openai/CLIP&#xff0c;先将CLIP文件夹下载到本地&#xff0c;随便什么位置。即点击下图中的Download ZIP&#xff0c;下载到本地后进行解压…