vue项目使用iview插件modal对话框嵌套表单验证点击确认按钮直接关闭的问题

最新推荐文章于 2023-04-22 20:26:08 发布
最新推荐文章于 2023-04-22 20:26:08 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： vue开发插件iview 文章标签： vue开发插件iview中对话框与表单验证问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loveqdm/article/details/95863289
版权

对于使用ivew插件开发项目时，它与elment-ui不同，遇到对话框里面嵌套表单验证时，当表单验证未通过我们不希望点击确定关闭对话框modal时的问题解决方案：
答案：很简单，直接在底部自定义确定按钮 和取消按钮就可以了，自定义方法ivew官方文档有https://www.iviewui.com/components/modal
在这里插入图片描述在这里插入图片描述

惊慌失措中...
关注
专栏目录
iview-admin 对话框确认 loading 及表单验证
Dong8508的博客
08-20 4818
1、iview的对话框，点击确认后就直接关闭了，当我们需要进行表单确认的时候，就需要特殊处理了   <template> <Button type="primary" @click="modal = true">设置汇率</Button> <Modal v-model="modal" title="设置汇率"
Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解
成长笔记
07-29 5026
缺乏耐心的读者请主要关注标红部分！ 因部分内容自动转为代码格式，所以代码部分请主要关注注释部分！ 1.Table表格组件内容自定义： 官网Table表格组件部分示例代码： columns12: [ { title: 'Name', slot: 'name' }, { title: 'Age', key: 'age' }, { t...
iview中关闭模态框处理表单验证提示信息
前端挖掘机
01-14 3040
首先给模态框设置显示属性v-model，模态框中需要验证的表单取名字ref： 确定与取消绑定事件 最后需要对isShow进行监听，如果模态框状态发生变化，就reset ...
vue项目中使用iview插件中this.$Modal.confirm的使用方法
热门推荐
loveqdm的博客
07-14 3万+
当我们项目中需要根据id或者其他删除一个选项时，我们会首先弹出确认删除对话框，询问用户是否删除，iview中this.$Modal.confirm
iview中Modal组件点击确定后验证信息不通过则不关闭弹窗方法
xiaobo0134的专栏
07-11 5433
在使用Modal对话框过程中，遇到当点击确定按钮后，即使有检验信息不通过，写了return，弹窗依然关闭了，解决方案如下 <Modal v-model="isTemManageShow" title="管理模板" @on-ok="ok" :loading="loading" @on-cancel="cancel"> <div class="mb10...
阻止iview-modal确定时关闭
夏尔的小酒馆
09-21 1万+
开发后台管理项目时使用了iview框架，实现模态窗的时候用到其Modal 对话框组件，复制粘贴官方代码时。遇到如下问题： 只要点击确定按钮，modal永远会关闭，return都阻止不了其关闭。 我本来在里面做了一个数据提交操作，在数据提交前要判定数据是否合法，不合法就提示用户修改，但我发现在@on-ok=&amp;quot;ok&amp;quot;的ok方法里写return没有任何卵用，只要点击了确定按钮，modal总是会关闭。 &amp;amp;...
uview 弹出框放表单 验证失效_基于element-ui对话框el-dialog初始化的校验问题解决...
weixin_39682301的博客
12-22 2397
不刷新页面重新打开el-dialog时，如果我们绑定了rules或者某个值需要required，它总会自动校验。查看了多个博文，发现常用的有两种解决方法(下列方法都可以在其他博文查看，不再细写，如有需要请自行查询)：1.给dialog套上v-if ；2.在关闭dialog时,监听关闭回调,清除校验。我在自己的项目里使用了上述两种方法，都不太好用，自己琢磨出了另一种方法：调用dialog打开的回调m...
Ant Design Vue 表单验证踩坑
乡村的一股清流~
01-16 4787
最近一个项目用了 Ant Design Vue ，我也不知道为啥用这个。。。FORM表单验证踩地坑简直是让我哭哭哭 以前用elementUI,Iview,很顺手，v-model简直是标配 可是这个Ant Design Vue 在需要验证的时候 不能用##### v-model,用v-decoration。 贴代码 如下 <style lang="less"> @import 'sou...
iview学习帮助文档
weixin_40885337的博客
03-25 3345
安装iview npm install view-design --save 导入iview 在main.js中导入iview import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); 按需引用iview组件 a.安装babel npm install babel-plugin-import --save-dev b.在 .babelrc 文件中 { "plugins
常用Iview组件集合以及常用特性
SEU_YL的博客
07-20 1398
常用Iview组件集合以及常用特性 Button 可以选择不同类型代表会以不同颜色呈现 可以选择边框是否为虚线或者为文本模式的按钮 可设置为幽灵按钮 可设置loading状态 可禁用 size只可选small、default、large三种 Icon 可根据type来选择不同的图标样子 size可设置大小，单位px color可设置颜色 Typography文字排版 分别有<Title> <Txt> <Pragraph>三种组件，分别适用于标题、不同样式的文本、段落，这三
iview-modal 点击按钮“确定”时弹窗自动关闭
11-29 4983
1.需求描述：编辑或新增一条数据，弹框modal操作，做表达校验 2.使用场景：新增或编辑角色，弹窗操作 3.问题描述：modal弹窗做from表达校验，点击确定，如果校验不通过，不应该自动关闭弹窗 4.解决思路： .解决思路1：给Modal添加属性loading后，点击确定按钮对话框不会自动消失，并显示 loading 状态，需要手动关闭对话框，常用于表单提交。（本人用此方法） .解...
解决 iview-modal 点击‘确定’按钮弹框自动关闭问题
Codernmx
09-24 1528
在使用iview发现点击确定的时候，他的弹层会自动关闭（默认的确定和取消 footer） 解决办法 使用slot="footer"添加一个footer，自定义确定取消的方法控制弹层的显示与隐藏。 <div slot="footer"> <Button size="large" @click="showDialog = false" >取消</Button> <Button
iview modal 怎样 控制 对话框的 不关闭
ShiYadong的专栏
08-06 7771
     想要使用 iview 的 Modal对话框实现 单击确定的 时候不直接关闭对话框，而是经过一些判断， 满足自己的条件的时候再关闭对话框   可以使用iview的 slot 自定义样式实现 &lt;div slot="footer"&gt; &lt;Button type="text" size="large" @click="modalCancel"&gt;取消&am
vue+重置表单验证. 点击确定后点击关闭，再打开时提示没有消失
weixin_30915275的博客
12-17 1546
1. 点击关闭图标或点击取消时重置表单. 2. 点击确定时把表单 formName 赋值给 reForm 转载于:https://www.cnblogs.com/Airoocle/p/10130101.html
iview表单验证 Select错误信息不消失
landiyaaa的博客
08-29 4366
1. 表单验证的默认规则是字符串数据类型。所以当select的value是数字时，表单验证不通过。 解决办法：在规则定义对象中加入属性type:'number' 2. 规则定义对象中，如果对Select的校验选择了trigger:'blur'，那么假如一开始select为空验证不通过，到后来选择了值理应通过验证，但错误信息是不会消失的。因为blur无法触发select的规则校验。 解决...
关于iView Modal内嵌表单的重置
最新发布
cqlcqlcui123的博客
04-22 456
是对整个表单进行重置，将所有字段值重置为空并移除校验结果，而resetFields()生效的前提条件有，切记不要在进入弹窗时执行resetFields()方法，而是在关闭弹窗前。点击弹窗的关闭按钮或取消按钮重置表单使用。
vue+iview 表单验证不成功会关闭弹窗 解决方案
不积跬步何以至千里
01-26 1420
问题来源 一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 Modal弹出框是不能关闭的 但现在相反 弹窗关闭了 解决方案如下 表单 <Modal v-model="employeeEntryInformationModel" title="添加入职信息'" @on-cancel="cancel('employeeEntryInformationForm')" @on-ok="submit('employeeEntryInformationForm')"
Vue使用组件iView
lxq_9532的博客
10-05 447
iView官方文档 https://www.iviewui.com/docs/guide/install 常用组件 Button 按钮 Modal 对话框 Table 表格 Select 选择器 Form 表单
重写iView中Modal对话框取消和确定按钮
Komorebi_00的博客
01-10 2283
重写iView中Modal对话框取消按钮 需求：点击审核按钮弹出对话框，对话框中取消按钮和确定按钮分为改为审核不通过和审核通过按钮，从而实现审核功能。 <Modal v-model="showAuditModal" :mask-closeable="false" @on-cancel="cancel" width="410"> <p class="audit-title"> <Icon type="ios-help-circle" size="28" styl
制作Vue表单验证插件va.js的经验分享
"Vue表单验证插件开发指南" 在前端开发中，表单验证是必不可少的一个环节，尤其是在Vue.js框架中。本篇文章将探讨如何基于Vue制作一个自定义的轻量级表单验证插件——va.js。作者选择自行开发而非使用现有的vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值