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

需求描述：

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

我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用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 异步弹出框使用记录

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

这是人干的的事嘛。。。

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

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

赞 (0)

相关推荐

  • 在vant中使用时间选择器和popup弹出层的操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <div class="page"> <van-cell-group> <van-cell title="选择日期" :value="datetime" arrow @click="showDatePicker = !showDatePicker" ></van-cell> </van-cell-g

  • vant中的toast轻提示实现代码

    在main.js中按需引入 import { Toast } from 'vant Vue.use(Toast) 页面中的methods中使用 send(name, img) { let msg = `${this.Cname}送${name}1`; this.$toast({ message: msg, icon: img }); }, 补充知识:Vant的Toast 轻提示API文档不准确解决方案 开发企业微信应用使用Vant组件库过程中,想要用到轻提示Toast,发现API文档无法使用:

  • vue 使用vant插件做tabs切换和无限加载功能的实现

    样例: 1.创建vue项目,不再详述 2.引入vant 之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了,大家可以借鉴,看源代码可能比官方给的文档更直观 官方文档 我在文件中

  • 解决vant中 tab栏遇到的坑 van-tabs

    话不多说,先看下问题描述: 我的需求:(和头条的tab栏类似 ,单击查看头条tab栏) 点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面)的时候,需要显示刚才被点击的tab栏高亮显示.(如果tab栏横向有滚动条,那也得让被选中的高亮显示). 所以,大部分人的解决办法就是将当前选中的tab的索引缓存起来,等回到该页面的时候,让被缓存的那个高亮显示出来. 坑的问题在于:van-tabs,里面的v-model默认值是0,但是类型却写着 nu

  • vant中的toast层级改变操作

    1.toast在main.js中引用 2.在每个页面中使用toast 3.每个页面有一个私有样式scoped,因此类名inexa的层级写在app.vue里 注:toast每调用一次(z-index)层级就会加一,因为默认打开了新窗口,层级会加一 补充知识:vant-ui toast和dialog使用 vant-ui中的toast和dialog使用 Toast('提示') Dialog({ message: '提示' }) //直接用官网的写法会报未定义 应该这样写 this.$toast('提示

  • Vant 中的Toast设置全局的延迟时间操作

    在引入Toast的配置文件里面配置如下: import { Toast } from 'vant'; Vue.use(Toast); Toast.setDefaultOptions({ duration: 800 }); // duration延迟时间 --完. 补充知识:vant ui库 toast 的使用及封装 最近在写一个项目,表单项较多,那必然前端做验证也是必须的了,一个一个写太繁琐,封装起来直接调用即可: 1.新建 toast.js import { Toast } from 'van

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

    需求描述: 需求描述:官方文档又是组件调用方式,又是函数调用方式. 我就需要一个很简单的:点击操作弹窗显示后,我填写一个表单,表单校验通过后,再调用API接口,返回成功后,关闭弹窗. 一个很简单的东西,element-ui用的很方便,在这里就懵比了,刚开始做的,弹窗关闭了,才返回异步接口调用的结果.网速慢点,用起来真的很不好. 正确的解决方式一: <van-dialog v-model="showDialog" title="提示" show-cancel-b

  • 详解如何在微信小程序开发中正确的使用vant ui组件

    微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr

  • 在vant中如何使用dialog弹窗

    在vant中如何使用dialog弹窗

    目录 如何使用dialog弹窗 1.官网示例 2.第一步引入vant中的dialog组件 3.vue页面中引入 4.使用 vant dialog组件使用 vant Dialog组件引入 template中使用 如何使用dialog弹窗 1.官网示例 因为这次是在手机上用的所以就用了vant组件 2.第一步引入vant中的dialog组件 官网介绍自行选择安装方式 3.vue页面中引入 <van-dialog v-model="show" title="标题"

  • van-dialog 组件调用报错的解决

    目录 van-dialog组件调用报错 van弹窗组件van-dialog遇到的坑 van-dialog组件调用报错 如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式 <van-dialog   v-model="show"   title="标题"   show-cancel-button >   <img src="https://img.yzcdn.cn/vant/apple-3.jpg"> <

  • Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    目录 问题重现 需求实现 附:vant之van-collapse无法默认展开某一项的解决方法 总结 问题重现 最近在做项目时,有一个需求是让 van-collapse 下拉折叠面板的第一项默认是展开状态:我使用到了 Vant UI 组件,首先按照官网文档的写法直接引入: <!--下拉折叠面板--> <van-collapse class="collapse" v-model="activeNames" is-link="false&quo

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

  • vue弹窗父子组件调用问题示例详解

    目录 一.vue弹窗 父子组件 emit 传图片 二.vue父组件调用子组件里的不同方法 一.vue弹窗 父子组件 emit 传图片 1.:modal-append-to-body="false"为了解决element ui中引入dialog窗口组件后遮罩层会挡住dialog窗口的用处,默认为true,改为false即可解决. 2.此弹窗主要为了解决收到下位机急停信号后,上位机前台显示弹窗的重复性. //此为子组件(customComponents.vue) <div> &

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • vue 无法覆盖vant的UI组件的样式问题

    vue 无法覆盖vant的UI组件的样式问题

    目录 无法覆盖vant的UI组件的样式 解决方法 使用样式穿透,强制覆盖Vant原样式 这个是组件的原样式 在浏览器可以看到 无法覆盖vant的UI组件的样式 有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法 使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件 <style scoped>   .a >>> .b { /* ... */ } </style> 以

  • Vant Weapp组件踩坑:picker的初始赋值解决

    在使用vant的picker组件时,我希望有在页面加载时向数据库获取值来设置picker的默认值.开始我使用官方文档中的default-index属性,并在onLoad方法中进行this.setData().但是这样做picker的默认索引还是0. 于是我又将setData放入onShow().onReady()方法,均不奏效.(我真的不知道为什么,新建一个空白页面测试也是这样) 继而我查看官方文档,发现picker有实例方法setIndexes(),于是尝试. 然而我在onLoad().onR

随机推荐