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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript:以前写的xmlhttp池,代码
May 18 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
Angular2库初探
Mar 01 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php阳历转农历优化版
2016/08/08 PHP
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python GUI模拟实现计算器
2020/06/22 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
应聘教师自荐信
2013/10/12 职场文书
服装店营销方案
2014/03/10 职场文书
挂牌仪式主持词
2014/03/20 职场文书
房屋出租协议书
2014/04/10 职场文书
爱情保证书大全
2014/04/29 职场文书
合同补充协议书
2016/03/24 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
python游戏开发之pygame实现接球小游戏
2022/04/22 Python