首页 > 其他分享 >vue3中交互反馈的用法及各种弹窗输入框最详细教学

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

时间:2024-09-03 19:24:56浏览次数:10  
标签:showToast 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的主要属性解释

标签:showToast,vue3,输入框,点击,按钮,超链接,跳转,弹窗
From: https://blog.csdn.net/m0_68597716/article/details/141819491

相关文章

  • zdppy+vue3+onlyoffice文档管理系统实战 20240902 上课笔记 登录功能优化
    遗留问题1、登录以后跳转最近文档2、如果用户没有登录应该自动跳转登录页面3、如果用户的token校验失败,应该自动调整登录界面4、按回车键自动跳转登录页面登录以后跳转最近文档constrouter=useRouter()router.push("/")实际代码:constloginData=awaitapi.login......
  • FastAPI+Vue3零基础开发ERP系统项目实战课 20240831上课笔记 查询参数和分页实现
    回顾获取路径参数什么是路径参数?/user/{id}什么时候使用?需要传递参数怎么实现类型转换?声明参数的类型怎么捕获文件路径?{file_path:path}什么是查询参数查询字符串是键值对的集合,这些键值对位于URL的?之后,以&分隔。http://127.0.0.1:8000/items/?skip=0&limit=10......
  • vue3整合antv x6实现图编辑器快速入门
    安装:npminstall@antv/x6--save如果使用umd包,可以使用下面三个CDN中的任何一个,默认使用X6的最新版:https://unpkg.com/@antv/x6/dist/index.jshttps://cdn.jsdelivr.net/npm/@antv/x6/dist/index.jshttps://cdnjs.cloudflare.com/ajax/libs/antv-x6/2.0.0/index.......
  • vue3使用路由守卫出现的问题合集
    登录后停留在登录页面无法跳转--24.9.3原代码:functionisRoute(to){letres=router.getRoutes()letresFil=res.filter(item=>item.path===to.path)returnresFil.length>0}router.beforeEach((to,from,next)=>{if(to.path!=='/login'......
  • Vue3+SpringBoot前端项目实战智慧实验室管理平台
    Vue3+SpringBoot前端项目实战:‌智慧实验室管理平台在当今数字化快速发展的时代,‌智慧实验室管理平台成为提升科研效率、‌优化资源配置的重要工具。‌本文将介绍如何使用Vue3和SpringBoot构建一个功能全面的智慧实验室管理平台,‌涵盖平台的设计思路、‌技术选型、‌核心功......
  • 前端Vue3项目VUE3+TypeScript企业级前端Vue项目
    前端Vue3项目VUE3+TypeScript企业级前端Vue项目‌Vue3+SpringBoot前端项目实战:‌智慧实验室管理平台‌在当今数字化快速发展的时代,‌智慧实验室管理平台的建设成为了提升科研效率与管理水平的关键一环。‌本文将通过一个实战案例,‌详细介绍如何使用Vue3和SpringBoot技术栈构建......
  • Vue3源码解析,打造自己的Vue3框架,实现技术深度与思维
    Vue3源码解析与打造自己的Vue3框架:‌技术深度与思维实践引言Vue.js作为当前最流行的前端框架之一,‌其不断迭代和更新推动了前端技术的快速发展。‌Vue3作为Vue.js的下一代主要版本,‌在性能、‌可维护性和开发体验方面进行了重大改进。‌本文将通过对Vue3源码的深入解析,‌探讨......
  • Vue3+Vite+Vant-UI+Pinia+VueUse开发双端业务驱动技术栈商用项目
    前言:个人git仓库,全是干货一、本次搭建项目涉及到vue3、vite、pinia、vue-router、typescript、element-plus,下面先简单介绍一下大家比较陌生的框架或库1、vue3vue团队官宣:2022年2月7日,vue3作为vue的默认版本。现在打开vue官网,界面默认显示的是vue3版本的指导文档。vue团队在......
  • Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3
    Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3前言当前基于NodeJs框架的全栈工程实践非常之火,作为一个很长时间未接触代码的前程序猿。一直有点手痒痒,想尝试一下这种全新的编程体验,于是就重新开始了填坑的不归之路。这一套框架是基于现在的前后台分离的指导原则来......
  • TS4+Vite+Vitest+Vitepress Vue3.3 自主打造媲美ElementPlus的组件库
    TS4+Vite+Vitest+VitepressVue3.3自主打造媲美ElementPlus的组件库这个问题看起来是想要创建一个类似ElementPlus的Vue组件库,并且使用TypeScript、Vite、Vitest和Vitepress进行开发。以下是一个简化的指南,用于创建一个自己的Vue组件库项目框架。安装必要的工具:npm......