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

最新推荐文章于 2024-02-01 10:03:32 发布
最新推荐文章于 2024-02-01 10:03:32 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zorro1x1/article/details/102750902
本文介绍了一种在不使用Modal对话框内置确定按钮的情况下，通过添加属性:footer-hide=true来实现自定义按钮的方法。这种方法避免了使用slot技术，提供了一个简洁的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

 :footer-hide="true"

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

zorro1x1
关注
从0到1教你搭建前端团队的组件系统（高级进阶必备）
趣谈前端
02-20 3299
前言随着vue/react这类以数据驱动为主的web框架的不断完善和壮大，越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用，比如基于r...
Vue组件收集
m0_46199530的博客
06-10 1560
Vue组件收集 文章目录Vue组件收集UI组件开发框架实用库服务端辅助工具应用实例Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2
(iView)View UI框架中的Modal对话框阻止点击确定按钮时关闭
qq_51758070的博客
11-10 1822
使用官方的代码，value(可用v-model双向绑定)控制modal框的显示隐藏，会出现只要点击了确定按钮，v-model绑定的值自动变为false，关闭modal框，想要的效果：点击确定按钮判断条件决定modal框是否关闭。
阻止iview-modal确定时关闭
BiangBaing的博客
08-03 2740
原文链接 https://blog.csdn.net/qq_16371909/article/details/82800427 开发后台管理项目时使用了iview框架，实现模态窗的时候用到其Modal 对话框组件，复制粘贴官方代码时。遇到如下问题：只要点击确定按钮，modal永远会关闭，return都阻止不了其关闭。 下面代码中我做了一个数据提交操作，在提交前要判定数据是否合法，不合法就提示用户修改，但我在@on-ok="ok"的ok方法里写return没有任何卵用，只要点击了确定按钮，modal总是会.
iview的Modal组件点击确定按钮如何阻止弹窗的关闭
weixin_30808575的博客
04-01 1224
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 1946
iview Poptip 关闭 Poptip :ref=“r.id” placement=“bottom-start” :offset=“0” 设定ref属性 this.labelId = r.id handleClose 方法关闭 this.$refs[this.labelId][0].handleClose();
uni-app 小程序遮罩层
最新发布
03-29
此外，在实际项目开发过程中，还可以引入第三方 UI 库中的组件作为替代方案，例如 iView (现已更名为 ViewUI)[^3] 提供的相关控件可以直接应用于解决某些复杂场景下的问题；或者借助 `$refs` 属性调用子组件实例函数...
Vue开发资源汇总
Dev-L的博客
05-26 1100
https://github.com/opendigg/awesome-github-vue https://github.com/vuejs/awesome-vue 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element★13489 - 饿了么出品的Vue2的web UI工具套件 Vux★8133 - 基于Vue和We...
解决 iview-modal 点击‘确定’按钮弹框自动关闭问题
Codernmx
09-24 1690
在使用iview发现点击确定的时候，他的弹层会自动关闭（默认的确定和取消 footer） 解决办法 使用slot="footer"添加一个footer，自定义确定取消的方法控制弹层的显示与隐藏。 <div slot="footer"> <Button size="large" @click="showDialog = false" >取消</Button> <Button
解决iview点击确定按钮后模态框立即关闭，无法进行数据验证后再关闭模态框问题
MissRen920的博客
09-28 3973
解决iview点击确定按钮后模态框立即关闭，无法进行数据验证后再关闭模态框问题 使用iview 组件的模态框写增加功能的时候，按照官网的代码拷下来，但是在最后一步的时候出现了一个小问题，需要对用户输入的数据进行验证，验证通过后再向后台发送请求，请求成功后关闭模态框，如果验证不通过，则提示用户填写有误，需重新填写，但是按照官网的例子，点击确定按钮后，模态框就关闭了return 出去也不行，后来在网上...
解决 iview-modal 点击‘确定’按钮时弹框自动关闭问题
qq_37029373的博客
06-12 9675
遇到的问题：iview-modal在做数据校验时，点击确定，当校验不通过时，弹框也自动关闭了 解决方案： 1.给Modal添加属性loading后，点击确定按钮对话框不会自动消失，并显示 loading 状态，需要手动关闭对话框，常用于表单提交。 handleSubmit(name) { let self = this; this.$refs[name].valida...
a-modal 关闭按钮阻止关闭窗口
huanglgln的专栏
02-01 2189
ant design vue、a-modal、阻止关闭
Antd 3.x Modal.confirm 手动控制
weixin_40532650的博客
03-04 2312
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 954
问题描述：在某个页面需打开一个Modal，然后这个Modal里有一个Form表单，点击确定时我需要先校验表单数据是否输入正确，不确定则不希望关闭窗口；（问题是：只要点击确认 loading :false 情况下iview默认就把窗口就关闭了） API上也只是说了通过loading状态来手动关闭对话框，但是在需要验证form表单，表单验证通过再关闭modal 这种环境下，似乎并不实用，当首次表单验...
Model去掉footer
CheneyChen27的博客
11-25 2452
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 794
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
禁用 BootStrap Modal 点击空白时自动关闭
lijunlinlijunlin的专栏
06-25 4206
转载自：http://www.phperz.com/article/14/1228/43418.html Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstra
iview modal 怎样 控制 对话框的 不关闭
ShiYadong的专栏
08-06 7843
     想要使用 iview 的 Modal对话框实现 单击确定的 时候不直接关闭对话框，而是经过一些判断， 满足自己的条件的时候再关闭对话框   可以使用iview的 slot 自定义样式实现 &lt;div slot="footer"&gt; &lt;Button type="text" size="large" @click="modalCancel"&gt;取消&am
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值