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 相关文章推荐
JS启动应用程序的一个简单例子
May 11 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
JavaScript实现省市联动效果
Nov 22 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
如何获得PHP相关资料
2006/10/09 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
html读出文本文件内容
2007/01/22 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python的time模块中的常用方法整理
2015/06/18 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
学校办公室主任职责
2013/12/27 职场文书
北京爱情故事观后感
2015/06/12 职场文书
八年级英语教学反思
2016/02/15 职场文书
redis中lua脚本使用教程
2021/11/01 Redis