iview中的modal框清除正则

最新推荐文章于 2023-11-10 10:07:07 发布
最新推荐文章于 2023-11-10 10:07:07 发布
阅读量355 收藏
点赞数
分类专栏： iview vscode 文章标签： view design 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsyyds666/article/details/126014024
版权

写model时发现了这样一个问题,因为公司项目很大,所以要求命名一致,所以他的效果是这样的,有一个大的form表单,然后里面有许多小的东西,我要在大的form表单里面进行添加一个modal,modal里面有一个form，如果不加这个form,直接用input框的话就造成左右不对齐的效果,所以我加了一个form,把两个form的名字都起得一样的，所以比较麻烦，当我用

this.$refs[formData].resetFields();

这个方法清空这个modal时,造成了页面丢失的情况,为了命名一致性,我没有使用这个方法,看到网络上的v-if判断这个方法不错,就用了

下面是我的图,第一张是大的form

 这是我的第二张图,就是我要写的modal里面的东西

 两个名字一样,所以换了v-if的方法

小凯!在努力
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
12-12
需求：点击btn,弹出modal显示图表（以折现图为例） 这应该是很基本的需求也是很容易实现的，代码和效果如下： 代码解释：setTem是一个方法，改变modal为true，默认为false ； chart-line是图表子组件，通过data向其传递参数，data绑定的数据是父组件mounted后拿到的数据 效果图：点击btn后的确显示了modal框，但是里面的图表不能显示，接着改变子组件任何代码，迫使重新编译子组件，则子组件的图表可以正常显示 分析：当点击btn时，modal框的确弹出来了，但推测其底层是使用v-show来实现显示与否，所以改变modal为true或fasle只是改变了
iview框架中modal默认按钮点击关闭
哈哈哈蜗牛的博客家
02-22 6624
iview框架中modal默认按钮点击关闭一、第一种方法二、第二种方法 问题： 使用了iview框架自定义的modal弹框，去验证表单之后，点击确认按钮之后，弹框自动就关闭了。 一、第一种方法 使用loading的属性进行控制，延迟状态。 同时使用$nextStick() 是指下次Dom更新之后执行回调，更新到最新的实例Dom结构。 //html: <Modal v-model="edit...
vue中设置当一个model关闭时将model中的组件销毁方法
sxj的专栏
04-12 1884
1、只需要在其中加入：destroyOnClose即可，如下图所示：
巧妙关闭iView的Modal框
harmsworth的博客
07-19 5505
前言 在使用 iView 的 Modal 框时，需要给 Modal 框传递一个变量，用于控制显示与隐藏。然后，这个变量由父组件传递给子组件 Modal 框，每次都需要调用父组件的函数修改该变量的值，多调用了一个函数。问：只需父组件传递一个变量给 Modal 框，无需调用函数，就能显示与隐藏 Modal 框。实现如下： 环境 Vue 2.5.2 iView 3.4.1 less 3.9.0 在 ...
vue开发，iview监听对话框关闭事件，并清除验证数据
童磨
04-12 2866
使用iview框架进行vue开发过程中遇见的零散问题（3） 在Modal 标签中添加监听对话框关闭事件 @on-visible-change=“ModelSaveclose” 在Form 标签中添加ref，此处我命名为 formModel <Modal v-model="modal.modalUp" @on-visible-change="ModelSaveclose" class-name="vertical-center-modal"> <Form ref="formMod
(iView)View UI框架中的Modal对话框阻止点击确定按钮时关闭
qq_51758070的博客
11-10 1057
使用官方的代码，value(可用v-model双向绑定)控制modal框的显示隐藏，会出现只要点击了确定按钮，v-model绑定的值自动变为false，关闭modal框，想要的效果：点击确定按钮判断条件决定modal框是否关闭。
iview后台框架
03-13
自己写的一个iview前台框架，有需要的拿去改改就能用了
iview-admin框架升级VueCli4.0
最新发布
11-16
iview-admin开源框架的版本太旧了已经不再更新，并且大概率安装启动会报错，主要报错原因为:node版本过高、框架中markdown组件不兼容、升级后less版本过高等问题，经过长期适配升级了iview官网开源的admin框架，将其...
iView框架问题整理小结
10-17
主要介绍了iView框架问题整理小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
antd vue 使用 modal 关闭后销毁组件
buling吖的博客
11-23 7409
问题： 使用 antd vue modal 时，弹框内部是一个table，table里面有 checkbox，checkbox 的 disable 属性取决于子组件，因此每次的 disable 属性值是不一样的。antd table 根据 getCheckboxProps API 来设置 checkbox 属性，但是只有第一次能设置属性，之后都不可以。 原因： modal 组件关闭之后，并没有销毁组件，一直保持这一开始的 checkbox 属性，导致后面再次打开 modal ，checkbox 的属性没有相
iview 表单清空
meng16的博客
03-31 2136
<Modal v-model="modal.visible" :width="60" :title="modal.title" @on-visible-change="closeAdd" @on-ok="handleSubmit('ProjectEditForm')"> <Form :model="model" ...
iview的modal组件踩坑
bingyue0126的博客
06-09 1868
解决点击确定按钮后，模态框不关闭问题（主要用于表单验证） 踩坑1：在modal组件中使用on-ok和on-cancel事件，当触发on-ok时，无法阻止modal关闭，对于需要校验的表单，得在校验成功且调用接口成功后才关闭对话框 踩坑2：在处理踩坑1的时候，通过iview的preventModal()方法对modal进行监听，并通过对输入框的内容进行判断，当验证不通过时执行模态框显示操作，但是发现这个办法会导致取消按钮失效，用户需要一直输入，直到表单验证通过后跳转，模态框才会关闭，这个办法还会造成代码
2021-09-16_关闭modal框后清除数据的几种方式
weixin_44631240的博客
09-16 1857
问题描述： 关闭modal框后清除数据的几种方式 # 解决方案： 1. modal的api：destroyOnClose={true} 2. 手动销毁：{visible?<Modal/>:null} 3. setXxxx(' ')
iView的Modal的简单使用
leilei__66的博客
10-29 2759
iView的Modal的简单使用 iView的Modal官网地址 部分属性、方法说明，更多请上官网查看【来源官网截图】 直接代码 <template> <div style="height: 1000px"> <!-- 第一个对话框（普通的） --> <Button @click="modal11 = true">普通版本</Button> <Modal v-model="modal11"
vue自定义组件双向绑定、vue model属性、iview步进器
weixin_52941842的博客
08-16 729
iview步进器
iview爬坑之旅——Modal点击‘确定’按钮时弹框自动关闭问题
一个女胖子的博客
07-29 2764
最近在做Angular项目到Vue项目重构迁移，之前Angular用的UI框架是NG-ZORRO，Vue现在用的是Iview； 但是当用Iview-modal 做表单或者条件校验时遇到了一个问题，当校验不通过时，点击确定，当校验不通过时，弹框也自动关闭了； 解决方案 方案一 （自用） 利用Modal的slot,自定义写底部按钮，这样就可以避开组件内置的 @On-ok, @on-cancel；在按钮点击事件里面去做数据的验证，通过v-model控制模态框的显示与隐藏。 <!--解决弹框自动关闭--&g
关iview的弹出框，点击确定，需要手动关闭的注意事项。
weixin_44777146的博客
11-19 1677
今天遇到一个需求： 弹出的modal框中，勾选数据，在点击modal框的确定时，调用接口，如果数据返回空，关闭modal框，否则modal框不关闭，提示他重新勾选数据。 modal框有props参数 loading默认是false,就是在点击确定直接关闭modal框。如果设置loading设置为true,则点击确定不会自动关闭modal框，需要手动设置modal框的显示和隐藏。这是我又发现另一个问题，请求一次提示重新勾选数据后，modal的确定按钮为loading加载状态，无法重新勾选进行第二次请求发送，数
解决 iview-modal 点击‘确定’按钮弹框自动关闭问题
Codernmx
09-24 1449
在使用iview发现点击确定的时候，他的弹层会自动关闭（默认的确定和取消 footer） 解决办法 使用slot="footer"添加一个footer，自定义确定取消的方法控制弹层的显示与隐藏。 <div slot="footer"> <Button size="large" @click="showDialog = false" >取消</Button> <Button
iview中Modal对话框点击确定后会自动关闭窗口
06-11
是的，iview中的Modal对话框点击确定按钮后会自动关闭窗口。这是Modal组件的默认行为。你可以通过传递 `mask-closable` 属性为 `false` 来禁用此行为，从而需要手动关闭对话框。例如： ``` <Modal v-model="visible" title="Title" :mask-closable="false"> <p>Content</p> <div slot="footer"> <Button type="primary" @click="handleOk">确定</Button> <Button @click="handleCancel">取消</Button> </div> </Modal> ``` 在这个例子中，`mask-closable` 属性被设置为 `false`，这意味着当用户点击遮罩层时，对话框不会自动关闭。相反，用户需要点击“确定”或“取消”按钮来关闭对话框，同时触发相应的回调函数（`handleOk`和`handleCancel`）。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值