当前位置: 首页 > news >正文

van-dialog弹窗异步关闭-校验表单

van-dialog弹窗异步关闭

有时候我们需要通过弹窗去处理表单数据,在原生微信小程序配合vant组件中有多种方式实现,其中UI美观度最高的就是通过van-dialog嵌套表单实现。

在这里插入图片描述

通常表单涉及到是否必填,在van-dialog的确认事件中直接return是无法阻止对话框关闭的,你需要通过异步关闭对话框的方式实现表单校验后的对话框关闭。只有当表单中的必填项全部校验通过才允许确认关闭对话框,否则阻止关闭并给予提醒。

vant的官网提供了一个异步关闭对话框的事件:before-close

在这里插入图片描述

该事件是一个异步函数,你需要在异步函数中返回对话框的关闭状态。

使用方法如下:

  <van-dialog before-close="{{beforeClose}}" use-slot title="编辑指标" show="{{ editShow }}" show-cancel-button bind:close="onClose" bind:confirm="sureDialog" confirm-button-color="#3d7fff"><view class="edit_chunk"><!-- 这里写自定义的表单...... --></view></van-dialog>

这里用到了before-close="{{beforeClose}}"方法,它指向的是data中的beforeClose函数

  data: {beforeClose: null, // 绑定异步关闭函数},

你可以在用户点击确定的时候校验表单,如果校验不通过则调用封装好的异步关闭函数,在promise中返回false阻止对话框关闭。

// 封装异步关闭函数
dialogClost() {this.setData({beforeClose: (action) =>new Promise((resolve) => {if (action === 'confirm') {// 确定按钮resolve(false)} else if (action === 'cancel') {// 取消按钮resolve(true)}}),})},

用户点击确定,校验表单,校验不同过时调用dialogClost函数阻止对话框关闭

// 确定sureDialog() {let { dataForm } = this.data;if (!dataForm.lineType) {wx.showToast({title: '请选择曲线类型',icon: 'none'})return this.dialogClost();}},

这里需要注意:如果使用异步关闭对话框,它会默认替换用户的对话框关闭事件,所以我们需要区分两种场景:
1、校验不通过
2、校验通过
点击取消时,无论校验是否通过都应该关闭弹窗。
点击确定需要校验表单是否通过。
所以你可以通过当前的状态来决定是否关闭弹窗

  dialogClost(type) {this.setData({beforeClose: (action) =>new Promise((resolve) => {if (action === 'confirm') {// 点击确定,根据传入的状态判断是否取消resolve(type)} else if (action === 'cancel') {// 取消则直接关闭resolve(true)}}),})},

调用时:

// 确定sureDialog() {let { dataForm } = this.data;if (!dataForm.lineType) {wx.showToast({title: '请选择曲线类型',icon: 'none'})return this.dialogClost(false); // 表单校验不通过}this.dialogClost(true); // 表单校验通过},

在这里插入图片描述

到这里我们就实现了异步关闭van-dialog弹窗的功能。


如果觉得这篇文章对你有帮助,欢迎点赞👍、收藏💖、转发✨哦~

相关文章:

van-dialog弹窗异步关闭-校验表单

van-dialog弹窗异步关闭 有时候我们需要通过弹窗去处理表单数据&#xff0c;在原生微信小程序配合vant组件中有多种方式实现&#xff0c;其中UI美观度最高的就是通过van-dialog嵌套表单实现。 通常表单涉及到是否必填&#xff0c;在van-dialog的确认事件中直接return是无法阻止…...

Dynamic Wallpaper 16.7中文版

Macos动态壁纸推荐&#xff1a; Dynamic Wallpaper是一款Mac平台上的动态壁纸应用程序&#xff0c;它可以根据时间等因素动态切换壁纸&#xff0c;提供更加生动和多样化的桌面体验。 Dynamic Wallpaper包含了多个动态壁纸&#xff0c;用户可以根据自己的喜好选择和切换。这些…...

​如何使用ArcGIS Pro制作渐变河流效果

对于面要素的河流水系&#xff0c;制作渐变效果方法比较简单&#xff0c;如果是线要素的河流有办法制作渐变效果吗&#xff0c;答案是肯定的&#xff0c;这里为大家介绍一下制作方法&#xff0c;希望能对你有所帮助。 数据来源 本教程所使用的数据是从水经微图中下载的水系数…...

《网络协议》06. HTTP 补充 · HTTPS · SSL/TLS

title: 《网络协议》06. HTTP 补充 HTTPS SSL/TLS date: 2022-10-06 18:09:55 updated: 2023-11-15 07:53:52 categories: 学习记录&#xff1a;网络协议 excerpt: HTTP/1.1 协议的不足、HTTP/2、HTTP/3、HTTP 协议的安全问题、SPDY、HTTPS、SSL/TLS、OpenSSL。 comments: fa…...

Python winreg将cmd/PowerShell(管理员)添加到右键菜单

效果 1. 脚本 用管理员权限运行&#xff0c;重复执行会起到覆盖效果&#xff08;根据sub_key&#xff09;。 icon自己设置。text可以自定义。sub_key可以改但不推荐&#xff08;避免改成和系统已有项冲突的&#xff09;。command不要改。 from winreg import *registry r&q…...

redis运维(九)字符串(二)字符串过期时间

一 字符串过期时间 细节点&#xff1a; 注意命令的入参和返回值 ① 再谈过期时间 说明&#xff1a; 设置key的同时并且设置过期时间,是一个原子操作 ② ttl 检查过期时间 ③ persist 删除过期时间 ④ redis 删除过期key的机制 ⑤ 惰性删除 惰性理解&#xff1a;让过期…...

【C++】多线程的学习笔记(3)——白话文版(bushi

前言 好久没有继续写博客了&#xff0c;原因就是去沉淀了一下偷懒了一下 现在在学网络编程&#xff0c;c的多线程也还在学 这一变博客就讲讲c中的Condition Variable库吧 Condition Variable的简介 官方原文解释 翻译就是 条件变量是一个对象&#xff0c;它能够阻止调用…...

kotlin--3.集合操作

目录 一.list集合 二.Set集合 三.Map集合 迭代遍历Map集合&#xff1a; 8.hashMap 四.Stream流 1.map 2.filter 3.reduce 4.forEach 5.sorted 6.distinct 7.综合案例 一.list集合 在Kotlin中&#xff0c;常见的List集合类型有以下几种&#xff1a; listOf&…...

自动驾驶-BEV感知综述

BEV感知综述 随着自动驾驶传感器配置多模态化、多源化&#xff0c;将多源信息在unified View下表达变得更加关键。BEV视角下构建的local map对于多源信息融合及理解更加直观简洁&#xff0c;同时对于后续规划控制模块任务的开展也更为方便。BEV感知的核心问题是&#xff1a; …...

面试题-3

1.说一下原型链 原型就是一个普通对象,它是为构造函数实例共享属性和方法&#xff0c;所有实例中引用原型都是同一个对象 使用prototype可以把方法挂载在原型上&#xff0c;内存值保存一致 _proto_可以理解为指针,实例对象中的属性,指向了构造函数的原型(prototype) 2.new操…...

C++ Core Guidelines 中文版 GSL

C GSL&#xff08;Guideline Support Library&#xff09;是由 Microsoft 开发的一个开源库&#xff0c;旨在提供一组通用的 C 标准库扩展&#xff0c;以支持 C 标准委员会提出的指导原则。GSL 为 C 开发人员提供了许多有用的工具和类型&#xff0c;以帮助他们编写更安全、更高…...

同时显示上下两层凸包特征的可视化程序

数据类型 std::vector<pcl::PointCloud<pcl::PointXYZ>::Ptr> hulls_k_upper std::vector<pcl::PointCloud<pcl::PointXYZ>::Ptr> hulls_k_lower std::vector<pcl::PointCloud<pcl::PointXYZ>::Ptr> hulls_underk_upper std::vector<…...

Django框架之模型层(二)

【十二】Django中如何开启事务 事务是MySQL数据库中得一个重要概念 事务的目的&#xff1a;为了保证多个SQL语句执行成功&#xff0c;执行失败&#xff0c;前后保持一致&#xff0c;保证数据安全 【1】ACID是数据库事务的四个关键特性 它代表了原子性(Atomicity)、…...

C++之list

C之list list的构造 #include <iostream> #include<list> using namespace std;//打印函数 void printfList(const list<int>&L) {for(list<int>::const_iterator it L.begin();it ! L.end();it){cout<<*it<<" ";}cout<…...

C语言日记——调试篇

一、调试调试的基本步骤 发现程序错误的存在 以隔离、消除等方式对错误进行定位 确定错误产生的原因 提出纠正错误的解决办法 对程序错误予以改正&#xff0c;重新测试 二、Debug和Release Debug通常称为调试版本&#xff0c;它包含调试信息&#xff0c;并且不作任何优化…...

【python】Django——templates模板、静态文件、django模板语法、请求和响应

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 【Django专栏】 Django——django简介、django安装、创建项目、快速上手 Django——templates模板、静态文件、django模板语法、请求和响应 Django——连接mysql数据库 Django——templates模板、静态文件、djang…...

Android设计模式--观察者模式

时间是一只藏在黑暗中温柔的手&#xff0c;在你一出神一恍惚之间&#xff0c;物走星移 一&#xff0c;定义 观察者模式是定义对象间一种一对多的依赖关系&#xff0c;使得每当一个对象改变状态&#xff0c;则所有依赖于它的对象都会得到通知并被自动更新 字面意思很好理解&am…...

【Linux】Ubuntu16.04下安装python高版本--源码安装

Ubuntu16.04下完美安装python高版本及对应版本的pip 方法一:直接用命令安装python3.6&#xff08;但我没安装成功&#xff09; 好像是因为Ubuntu16.04的软件仓库&#xff08;源&#xff09;中python的最高版本就是python3.5&#xff0c;所以无法直接用apt来安装 #方法一 sudo…...

变长子网划分问题的二叉树解法

计网的变长子网划分、计组的变长操作码划分、数据结构的哈夫曼编码&#xff0c;都是前缀编码的本质&#xff08;变长操作码的二叉树解法我还在琢磨中&#xff09; 【二叉树解法】每条从叶结点到根节点的路径上有且只有一个被分配的结点&#xff1a; 【例】现将一个IP网络划分成…...

编译安装redis及配置多实例

yum安装是这种十分简单的方法我们就不在提及了&#xff0c;今天我们来做一下redis的编译安装 Redis源码包官方下载链接&#xff1a;http://download.redis.io/releases/ 一、编译安装&#xff1a; 安装依赖包 dnf -y install make gcc jemalloc-devel systemd-devel如果是…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...

uniapp获取当前位置和经纬度信息

1.1. 获取当前位置和经纬度信息&#xff08;需要配置高的SDK&#xff09; 调用uni-app官方API中的uni.chooseLocation()&#xff0c;即打开地图选择位置。 <button click"getAddress">获取定位</button> const getAddress () > {uni.chooseLocatio…...

旋量理论:刚体运动的几何描述与机器人应用

旋量理论为描述刚体在三维空间中的运动提供了强大而优雅的数学框架。与传统的欧拉角或方向余弦矩阵相比&#xff0c;旋量理论通过螺旋运动的概念统一了旋转和平移&#xff0c;在机器人学、计算机图形学和多体动力学领域具有显著优势。这种描述不仅几何直观&#xff0c;而且计算…...