vue3中交互反馈的用法及各种弹窗输入框最详细教学

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的主要属性解释