最简单的方法阻止 iview modal 对话框自动关闭

最新推荐文章于 2024-02-01 10:03:32 发布
最新推荐文章于 2024-02-01 10:03:32 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zorro1x1/article/details/102750902
版权

最简单的方法就是不使用 Modal 对话框的“确定”按钮，给 Modal 添加以下属性

 :footer-hide="true"

然后就可以写自己的 Button 按钮了，不需要 slot 技术。

zorro1x1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
10-17
本文将深入探讨一个关于iView Modal组件的问题，特别是如何正确控制Modal的显示与隐藏，以及为何在某些情况下使用`v-if`比`v-show`更为合适。 问题背景： 在Vue组件中，我们可能需要实现一个功能，即点击按钮后弹出...
iview中Select 选择器多选校验方法
08-27
iView 中 Select 选择器多选校验方法 iView 是一个基于 Vue.js 的高质量 UI 组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。其中，Select 选择器是一个非常常用的组件，它可以帮助用户从多个选项中...
阻止iview-modal确定时关闭
BiangBaing的博客
08-03 2332
原文链接 https://blog.csdn.net/qq_16371909/article/details/82800427 开发后台管理项目时使用了iview框架，实现模态窗的时候用到其Modal 对话框组件，复制粘贴官方代码时。遇到如下问题：只要点击确定按钮，modal永远会关闭，return都阻止不了其关闭。 下面代码中我做了一个数据提交操作，在提交前要判定数据是否合法，不合法就提示用户修改，但我在@on-ok="ok"的ok方法里写return没有任何卵用，只要点击了确定按钮，modal总是会.
(iView)View UI框架中的Modal对话框阻止点击确定按钮时关闭
qq_51758070的博客
11-10 1189
使用官方的代码，value(可用v-model双向绑定)控制modal框的显示隐藏，会出现只要点击了确定按钮，v-model绑定的值自动变为false，关闭modal框，想要的效果：点击确定按钮判断条件决定modal框是否关闭。
iview的Modal组件点击确定按钮如何阻止弹窗的关闭
weixin_30808575的博客
04-01 1155
Modal属性footer-hide设置为true，隐藏默认的modal底部，使用slot插入自定义的底部按钮 1 <Modal title="标题" v-model="modal1" :footer-hide=true> 2 <div slot="footer"> 3 <Button type="ghost">取消&lt...
iview Poptip 关闭
诚实可靠小郎君
02-21 1738
iview Poptip 关闭 Poptip :ref=“r.id” placement=“bottom-start” :offset=“0” 设定ref属性 this.labelId = r.id handleClose 方法关闭 this.$refs[this.labelId][0].handleClose();
iview table高度动态设置方法
08-27
iview Table 高度动态设置方法 iView 是一个基于 Vue.js 的组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。其中，iView Table 是一个非常常用的组件，用于显示表格数据。然而，在使用 iView Table ...
解决iview点击确定按钮后模态框立即关闭，无法进行数据验证后再关闭模态框问题
MissRen920的博客
09-28 3903
解决iview点击确定按钮后模态框立即关闭，无法进行数据验证后再关闭模态框问题 使用iview 组件的模态框写增加功能的时候，按照官网的代码拷下来，但是在最后一步的时候出现了一个小问题，需要对用户输入的数据进行验证，验证通过后再向后台发送请求，请求成功后关闭模态框，如果验证不通过，则提示用户填写有误，需重新填写，但是按照官网的例子，点击确定按钮后，模态框就关闭了return 出去也不行，后来在网上...
解决 iview-modal 点击‘确定’按钮时弹框自动关闭问题
qq_37029373的博客
06-12 9394
遇到的问题：iview-modal在做数据校验时，点击确定，当校验不通过时，弹框也自动关闭了 解决方案： 1.给Modal添加属性loading后，点击确定按钮对话框不会自动消失，并显示 loading 状态，需要手动关闭对话框，常用于表单提交。 handleSubmit(name) { let self = this; this.$refs[name].valida...
a-modal 关闭按钮阻止关闭窗口
最新发布
huanglgln的专栏
02-01 976
ant design vue、a-modal、阻止关闭
Antd 3.x Modal.confirm 手动控制
weixin_40532650的博客
03-04 2018
1.场景 在confirm中输入内容，检验不通过，则提醒用户，但不关闭confirm框 2.问题 antd 样例中，onOk，onCancel都是一触即关的模式 3.解决后 校验不通过，confirm框依旧存在，点击取消或是输入正确内容后点击确定，confirm框才会消失 代码： /** * @name feedBack * @author beiysd * @description 反馈 */ feedBack = () => { let confirm = Moda
iview中Modal对话框点击确定后会自动关闭窗口
weixin_30832143的博客
01-04 889
问题描述：在某个页面需打开一个Modal，然后这个Modal里有一个Form表单，点击确定时我需要先校验表单数据是否输入正确，不确定则不希望关闭窗口；（问题是：只要点击确认 loading :false 情况下iview默认就把窗口就关闭了） API上也只是说了通过loading状态来手动关闭对话框，但是在需要验证form表单，表单验证通过再关闭modal 这种环境下，似乎并不实用，当首次表单验...
Model去掉footer
CheneyChen27的博客
11-25 2196
Model只要页眉不要页脚 去掉iview Modal组件中的取消和确定按钮 如下图所示： Modal对话框可通过solt 自定义页头 / 页脚 / 右上角关闭内容 （header / footer / close） 实现去除“取消” 和“确定”按钮可通过自定页脚，其代码如下： 方式一：slot = “footer” <Modal v-model = "modal1" title = "Common Modal dialog box title">
vue项目中涉及到的iview组件
upStar1的博客
05-19 696
1.input输入框 <Col :span="6"> <FormItem label="姓名"> <Input v-model="form.name" placeholder="请输入"></Input> </FormItem> </Col> 2.select选择框 <Col :span="6"> <FormItem label="性别"> <Select v-mod
iview modal 弹出框 不自动消失的方法
用户名已注销的博客
04-30 3040
iview modal 弹出框 不自动消失的方法 点击ok的时候会自动关闭弹出框 // ok时会自动关闭 <Modal v-model="modal1" title="modal title" @on-ok="ok" @on-cancel="cancel"> </Modal> 但是，有时候我们会在弹出框关闭前做一系列操作，最常见的就...
解决 iview-modal 点击‘确定’按钮弹框自动关闭问题
Codernmx
09-24 1489
在使用iview发现点击确定的时候，他的弹层会自动关闭（默认的确定和取消 footer） 解决办法 使用slot="footer"添加一个footer，自定义确定取消的方法控制弹层的显示与隐藏。 <div slot="footer"> <Button size="large" @click="showDialog = false" >取消</Button> <Button
iview modal 怎样 控制 对话框的 不关闭
ShiYadong的专栏
08-06 7746
     想要使用 iview 的 Modal对话框实现 单击确定的 时候不直接关闭对话框，而是经过一些判断， 满足自己的条件的时候再关闭对话框   可以使用iview的 slot 自定义样式实现 &lt;div slot="footer"&gt; &lt;Button type="text" size="large" @click="modalCancel"&gt;取消&am
iview Modal对话框怎么设置宽度
05-26
你可以通过设置 `width` 属性来设置对话框的宽度，例如： ```html <Modal title="对话框标题" v-model="visible" :width="600"> <!-- 对话框内容 --> </Modal> ``` 在上面的例子中，我们将对话框的宽度设置为 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值