1.showToast
1.1 参数说明
以上是showToast中的常用参数,接下来会对一部分进行演示
1.1.1 title
现在添加了一个showToast方法,并且在里面写了 title 参数
当我第一次进入这个页面时,会触发该弹窗,并且上面会有添加的文字
《操作失败》上面是 ✓ 的原因是因为默认值为 ✓
1.1.2 icon
指的是图标,有以下几个值
可以根据不同的状态更换图标
1.1.3 image
文字上显示图片,如果与图标icon同时存在,那么就覆盖icon的值
此时放了一个✓的图片,看看效果如何
此时的《操作成功》上方的图片即是添加的图片,所以在不想使用默认的icon值时
可以使用自己的图片
2.其他方式跳转页面
1. 超链接直接跳转
如果不想使用正常的底部状态栏跳转,而是想使用超链接的方式那该如何使用?
此时是正常的超链接跳转方式,但是在页面中会发现,实际上是跳转不过去的
点了并没有什么反应
现在在这里加上一个open-type属性,并且给它加上专属于uni的功能
2.超链接延时跳转
根据上方的代码,成功的实现了超链接直接跳转,但是在弹窗并未消失时,就已经可以跳转
如果想实现在弹窗关闭后才可以使用超链接,那么该如何实现呢?
实现操作也非常简单,仅需要在这里加上一个mask属性,并且为它赋值为ture就可以了
3.showToast案例:实现点击显示,点击隐藏
此时为它设置了两个按钮,一个是显示,一个是隐藏
如何实现点击显示就能显示,隐藏按钮就能消失呢?
在script 中更改代码,加上两个方法,当点击《显示》时,就会执行显示操作
当点击隐藏时,就会执行hideToast方法来隐藏
4. showLoading
showLoading 与 showToast 有些相似,都是用于加载动画的
但是在showLoading的使用过程中,如果没有设定一个准确的结束时间,那么就不会结束
在个人中心里面放了一个弹窗,在显示的过程中,一直都在转圈,也就是一直都在加载中
所以说必须给它设置一个准确的结束时间
在下面为他设置了一个隐藏的方法,并且是在两秒后自动隐藏
这样就可以自动关闭了
以下是hideLoading的属性
5.showModal
上面是showModal 方法的主要属性
实现代码:
定义一个按钮,调用show方法,在show方法中直接使用showModal的方法
这样就可以实现每次调用show方法时就可以将modal的框显示出来
此时当我点击上方的《显示》时,就可以将对话框弹出来
5.1 content
意思是:“提示的内容”
在这边加上content 属性,里面写上《删除后不会恢复了》用来提示用户
这时就在标题的下面加上了一句话,所以 title 主要是标题,而 content 才是主体
5.2 showCancel
意为:是否显示取消按钮
并且只有两个值 《true》 《false》
示例:
当定义为false时,会将取消按钮给隐藏,所以说在默认情况下是一个true的值
5.3 cancelText与confirmText
cancelText为取消时按钮的文字,confirmText为确认时按钮的文字
可以看到在进行赋值后,都进行了更改
5.4 editable
是否显示输入框,一般使用在二级确认的情况下
比如:
就比如这种在需要使用二级密码来验证的时候,就可以使用此属性
5.5 placeholderText
显示输入框时的提示文本,必须在editable为 true 时才可以生效
5.6 success
接口调用成功的回调函数
定义这个回调函数,并且将res输出
此时输入了个888的二级密码
点击Yes后可以看到,在控制台中输出了一个对象
并且刚刚输入的二级密码也在里面,所以这样就可以实现回调函数的获取
并且判断是根据confirm来判断的
当点击Yes时,会返回一个true;点击No时,会返回一个false
这样就可以再次升级代码,如果点击了Yes那么就将删除成功的弹窗给返回出来
当点击Yes后,弹出了《删除成功》的弹窗
既然可以删除成功,当然也可以删除失败
此时《删除失败》也成功的返回出来了
这就是showModal的主要属性解释
标签:showToast,vue3,输入框,点击,按钮,超链接,跳转,弹窗 From: https://blog.csdn.net/m0_68597716/article/details/141819491