解决iview模态框modal在使用@on-ok事件时，校验失败时也会关闭模态框

最新推荐文章于 2024-02-08 17:29:11 发布
最新推荐文章于 2024-02-08 17:29:11 发布
阅读量2.9k 收藏 2
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45851208/article/details/121402921
版权

问题场景：iview踩坑之modal模态框使用@on-ok事件后，即使校验失败也会关闭模态框。

解决方案：使用中的自定义插槽slot来自定义写底部按钮，然后通过v-model控制模态框的显示与隐藏。

<Modal v-model="modifyImgModel">
   <div slot="footer" align="center">
      <Button class="btn" size="default" type="default" @click="cancelModifyImg">取消</Button>
      <Button class="btn" size="default" type="primary" @click="sureModifyImg">确定</Button>
   </div>
</Modal>
HELLO_小仙女~
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue+iview 表单验证不成功会关闭弹窗 解决方案
不积跬步何以至千里
01-26 1388
问题来源 一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 Modal弹出框是不能关闭的 但现在相反 弹窗关闭了 解决方案如下 表单 <Modal v-model="employeeEntryInformationModel" title="添加入职信息'" @on-cancel="cancel('employeeEntryInformationForm')" @on-ok="submit('employeeEntryInformationForm')"
使用Antd的modal确认框，点击【确定】，调用onOk方法时，检查是否有错误，有错误会隐藏当前页面的问题
u013282737的博客
10-21 1万+
希望点击【确定】时，效果如1: 1: 实际效果确实：警告内容显示后，确认框消失了 如下，调用onOk的时候，加一个e,就解决问题了，效果就如1： ...
antd modal的onOk提交form表单
feifeichongtian的博客
08-17 4660
import React, { Component } from 'react' import { Modal, Form, Input, Button } from 'antd' import FormModal from './SharedForm' class SharedFormModal extends Component { state = { visible: true, } showModelHandler = (e) => { if (e) e.s.
iview的modal组件踩坑
bingyue0126的博客
06-09 1874
解决点击确定按钮后，模态框不关闭问题（主要用于表单验证） 踩坑1：在modal组件中使用on-ok和on-cancel事件，当触发on-ok时，无法阻止modal关闭，对于需要校验的表单，得在校验成功且调用接口成功后才关闭对话框 踩坑2：在处理踩坑1的时候，通过iview的preventModal()方法对modal进行监听，并通过对输入框的内容进行判断，当验证不通过时执行模态框显示操作，但是发现这个办法会导致取消按钮失效，用户需要一直输入，直到表单验证通过后跳转，模态框才会关闭，这个办法还会造成代码
vue封装一个简单的modal对话框
最新发布
qq_55491577的博客
02-08 903
在modal.vue中，我们在props中接受四个参数，title：标题，width：宽度， height：高度，top：距离顶部的高度，不传则是默认的值；并提供了两个具名插槽，header和footer，以及一个默认插槽slot显示里面的内容；并添加了三个自定义事件控制modal的显示和隐藏；点击右上角的xx, 取消、确定都会把对话框隐藏，并使用message组件提示用户 ，可以再这三个事件写自己的逻辑，比如点击确定发起请求等；通过外层的div控制组件的显示隐藏。点击打开modal那个按钮弹出对话框。
基于IView中on-change属性的使用详解
08-27
在使用IView的on-change属性时，可能会遇到一些问题，例如onchange事件不触发、值不更新等。解决这些问题的方法有： 1. 使用@on-change指令来监听控件的变化。 2. 确保绑定的方法是正确的。 3. 使用IView的Debug...
详解iview的checkbox多选框全选时校验问题
10-16
主要介绍了详解iview的checkbox多选框全选时校验问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
10-17
主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue render 嵌套 iview Poptip 及on-ok事件
加加加菲猫
01-11 6383
columns4: [ { title: '操作', key: 'action', width: 150, align: 'center', render: (h, params) =&gt; { return h('div', [ h('Button', { props: { t...
iview modal 弹出框 不自动消失的方法
用户名已注销的博客
04-30 3018
iview modal 弹出框 不自动消失的方法 点击ok的时候会自动关闭弹出框 // ok时会自动关闭 <Modal v-model="modal1" title="modal title" @on-ok="ok" @on-cancel="cancel"> </Modal> 但是，有时候我们会在弹出框关闭前做一系列操作，最常见的就...
Vue学习—深入剖析v-on指令
xun__xing的博客
09-04 1352
深入剖析v-on指令一、v-on指令1.使用2.为什么在 HTML 中监听事件?二、v-on修饰符1.事件修饰符1.stop2.prevent3.capture4.self5.once6.passive2.按键修饰符1.按键码3.系统修饰键4.exact 修饰符5.鼠标按钮修饰符 一、v-on指令 1.使用 v-on 指令可以监听 DOM 事件，并在触发时运行一些 JavaScript 代码 事件类型由参数指定 <div id="app"> <button v-on:click
iview使用记录
Y13349887034的博客
10-19 74
日期选择器、弹出框、下拉框
elementUI弹窗关闭自动清空表单以及校验规则及不生效处理办法
发渐稀的博客
08-30 2557
element组件中的Dialog 对话框，有时候会出现，第一次打开的时候校验没有问题，但是如果紧接着第二次打开弹框的时候，上一次的校验就会残留在本次打开的弹窗上。点击叉号那么就需要在叉号的回调函数中去清空本次的校验记录，而取消按钮更好做，直接写个函数指明取消即可。弹窗关闭一共就两种方式，第一种点击叉号，第二种点击取消按钮，那么就需要在这两个节骨眼上做文章；对于叉号而言，添加close事件，函数同取消按钮。
iview modal点击确定验证不通过也关闭弹窗的问题解决
lyz246859的博客
07-28 620
在开发pc页面中，使用iview modal弹窗的时候，会发现点击确定的时候，就算验证参数报错，弹窗也会自己关闭，这就非常不合理了，如果是form弹窗，那么字段就都要再填一遍，那么怎么解决呢？关键就在modal的loading参数了，loading参数为true时，点击确定就会触发loading状态，出现验证错误时，开启loading状态就行，等验证通过后，再关闭loading状态就可以了。
iView的Modal填坑之旅
热门推荐
月想容的博客
03-16 3万+
现象和需求描述：        有个表格，需要添加登记和查看功能，准备用一个modal（模态框）来实现。在设计过程中，希望能够实现最大的模块化和重用性。故一开始，设计了一个将iView的Modal和内部参数全部放入一个vue components组件中：   子组件：&lt;template&gt; &lt;Modal :value="modalStatus" ...
阻止iview-modal确定时关闭
夏尔的小酒馆
09-21 1万+
开发后台管理项目时使用了iview框架，实现模态窗的时候用到其Modal 对话框组件，复制粘贴官方代码时。遇到如下问题： 只要点击确定按钮，modal永远会关闭，return都阻止不了其关闭。 我本来在里面做了一个数据提交操作，在数据提交前要判定数据是否合法，不合法就提示用户修改，但我发现在@on-ok=&amp;quot;ok&amp;quot;的ok方法里写return没有任何卵用，只要点击了确定按钮，modal总是会关闭。 &amp;amp;...
iView实现自定义Modal
weixin_33739523的博客
07-04 3067
Modal组件是iView库中较常用的一个，而如何利用render实现一个自定义的Modal在官方wiki中并没有详细说明。我在这里将举例说明： 所谓自定义内容，是指使用一个自定义的组件作为Modal框的内容。在我的实例中，我使用的内容组件包含有两个Input组件，用于实现两个变量的输入。 自定义组件add.vue <templat...
Zuul进阶篇-okhttp替换httpclient
海锋博客
07-03 3万+
前言 在当下微服务的场景下，HTTP请求方式成为了集成各服务的最佳方式。在 Java 平台上，Java 标准库提供了 HttpURLConnection 类来支持 HTTP 通讯。不过 HttpURLConnection 本身的 API 不够友好，所提供的功能也有限。大部分 Java 程序都选择使用 Apache 的开源项目 HttpClient 作为 HTTP 客户端。Apache Htt
iview-Modal 二次封装
07-27
对于 iview-Modal 的二次封装，可以通过创建一个自定义的组件来实现。下面是一个简单的示例： ```vue <template> <div> <Button @click="showModal">打开模态框</Button> <Modal v-model="visible" title="示例模态框" @on-ok="handleOk" @on-cancel="handleCancel"> <p>这是一个示例模态框内容</p> </Modal> </div> </template> <script> import { Modal, Button } from 'view-design'; export default { components: { Modal, Button, }, data() { return { visible: false, }; }, methods: { showModal() { this.visible = true; }, handleOk() { // 处理确认事件 this.visible = false; }, handleCancel() { // 处理取消事件 this.visible = false; }, }, }; </script> ``` 在这个示例中，我们使用了 `Modal` 和 `Button` 组件，通过 `v-model` 实现了模态框的显示与隐藏。`@on-ok` 和 `@on-cancel` 监听了确定和取消按钮的点击事件，并在回调函数中处理对应的逻辑。 你可以根据实际需求，对 `Modal` 进行更多的二次封装，例如添加自定义样式、传递参数等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值