vant-ui组件调用Dialog弹窗异步关闭操作


Posted in Javascript onNovember 04, 2020

需求描述:

需求描述:官方文档又是组件调用方式,又是函数调用方式。

我就需要一个很简单的:点击操作弹窗显示后,我填写一个表单,表单校验通过后,再调用API接口,返回成功后,关闭弹窗。

一个很简单的东西,element-ui用的很方便,在这里就懵比了,刚开始做的,弹窗关闭了,才返回异步接口调用的结果。网速慢点,用起来真的很不好。

正确的解决方式一:

<van-dialog
   v-model="showDialog"
   title="提示"
   show-cancel-button
   :before-close="onBeforeClose"
   @confirm="handleConfirm"
  >
   <van-form ref="myform">
    <van-field
     v-model="attendanceName"
     name="name"
     label="名称"
     placeholder="请输入名称"
     :rules="[
      { required: true, message: '请填写名称' }
     ]"
    />
   </van-form>
  </van-dialog>

关键点,showDialog控制显示隐藏,before-close控制关闭前的回调,confirm 是弹窗点击确认按钮触发的事件,ref拿到form实例。

刚开始我把表单校验放在before-close,实现的结果不对。

onBeforeClose(action, done) {
   if (action === "confirm") {
    return done(false);
   } else {
    // 重置表单校验
    this.$refs["myform"].resetValidation("name");
    this.name= undefined;
    return done();
   }
  },

我把onBeforeClose中的,点击确认confirm的操作,done(false),阻止弹窗关闭

把表单校验和异步接口请求成功后关闭弹窗的,都放到handleConfirm操作中,

// 实例弹窗确认
  handleConfirm() {
   this.$refs["myform"]
    .validate()
    .then(() => {
     let para = {
      data: {
       name: this.name,
      },
     };
     ajaxAdd(para).then(() => {
      this.showDialog = false; // 在这里手动的关闭弹窗
      this.$toast.success("新增成功");
      this.name= undefined;
      this.onRefresh();
     });
    })
    .catch(() => {});
  },

这样修改后,点击取消,可以直接关闭。点击确认,需要先表单校验,校验成功后,才会去发送ajax异步请求,请求接口返回成功后,才会关闭弹窗。

补充知识:关于Vant dialog 异步弹出框使用记录

vant-ui组件调用Dialog弹窗异步关闭操作

这个是官方文档,啥说明没有就有个解释

vant-ui组件调用Dialog弹窗异步关闭操作

这是人干的的事嘛。。。

具体来说下怎么在vue中使用它

vant-ui组件调用Dialog弹窗异步关闭操作

以上这篇vant-ui组件调用Dialog弹窗异步关闭操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript各种复制代码收集
Sep 20 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
理解JavaScript原型链
Oct 25 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 #Javascript
vant中的toast层级改变操作
Nov 04 #Javascript
vant中的toast轻提示实现代码
Nov 04 #Javascript
JavaScript快速调试的两个技巧
Nov 04 #Javascript
如何实现小程序与小程序之间的跳转
Nov 04 #Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 #Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 #Javascript
You might like
phpmyadmin操作流程
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
php编程每天必学之表单验证
2016/03/01 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python实现车牌识别的示例代码
2019/08/05 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
四风存在的原因分析
2014/02/11 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
运动会入场式解说词
2014/02/18 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
天地会口号
2014/06/17 职场文书
资料员岗位职责
2015/02/10 职场文书
培训师岗位职责
2015/02/14 职场文书
财务会计求职信范文
2015/03/20 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android