遇到的问题:iview-modal在做数据校验时,点击确定,当校验不通过时,弹框也自动关闭了

解决方案:

1.给Modal添加属性loading后,点击确定按钮对话框不会自动消失,并显示 loading 状态,需要手动关闭对话框,常用于表单提交。

handleSubmit(name) {
      let self = this;
      this.$refs[name].validate((valid) => {
        setTimeout(() => {
          this.loading = false;
          this.$nextTick(() => {
             this.loading = true;
        }, 100);

2.利用<Modal></Modal>的slot,自定义写底部按钮,这样就可以在按钮点击事件里面去做数据的验证,通过v-model控制模态框的显示与隐藏。

<Modal title="xxx" v-model="showRejectModal">
   <!--重点来了-->
   <div slot="footer">
    <Button type="text" size="large" @click="cancel">取消</Button>
    <Button type="primary" size="large" @click="define">确定</Button>
</Modal>

官网上Modal 可自定义的模块如下:

不断踩坑不断挖掘

需求场景:点击一个按钮,需要弹出一个modal框,点击弹出框的确定按钮,也需要弹出一个modal框提示用户接下来的操作。不做特殊处理,会发现第二个弹出框出现一下迅速自动关掉了。 原因分析:在网上查了一些资料,有人说,是因为,两层弹出框 采用的是一个开关值,发生了覆盖。确切原因后续会接着查询更新 临解决方案:在第二层弹框外套层计器,暂解决问题 Modal属性footer-hide设置为true,隐藏默认的modal底部,使用slot插入自定义的底部按钮 1 <Modal title="标题" v-model="modal1" :footer-hide=true> 2 <div slot="footer"> 3 <Button type="ghost">取消&lt... <div class="modal-dialog" style="height: auto;" data-backdrop="static"> 参考:https://blog.csdn.net/xfy2015/article/details/80613066 让“自动更正”输入统一的文本,你是不是经常为输入某些固定的文本,如《电脑报》而烦恼呢?那就往下看吧。 1.执行“工具→自动更正”命令,打开“自动更正”对话框。 2.在“替换”下面的方框中输入“pcw”(也可以是其他字符,“pcw”用小写),在“替换为”下面的方框中输入“《电脑报》”,再单击“添加”和“确定按钮。 3.以后如果需要输入上述文本,只要输入“pcw”字符?此可以不考虑“pcw”的... &lt;div slot="footer"&gt; &lt;Button type="text" size="large" @click="modalCancel"&gt;取消&am 需求存在有一个全局最高层弹窗,点击跳转特定页面 问题描述: 使用modal,弹出的弹窗是通过v-model="visible"判断显示的,都可以在页面跳转后正常被关闭,但使用this.$confirm弹出的弹窗无法自动关闭,则出现在特定页面出现上个界面的提示。 解决方案: 通过查看官方文档发现了destroy()的方法 则可以在data中定义modal,再使用 this.modal=this.$confirm({ title: “提示”, content: “确认要删除吗?”, onOk() 下面是本公众号文章分类目录,点击标题文字可打开分类文章列表:CAD安装卸载异常、退出文件及输入输出基本操作技巧各种设置及相关问题界面和显示相关问题快捷键视图设置和调整选择及组坐标系、坐标输入对象捕捉图层管理颜色线型字体和文字标注、引线二维绘图多段线表格图块、属性块、动态块填充复制粘贴三维建模... 有候我们需要单独隐藏Modal对话框的默认确定或取消按钮,设置:footer="null"会把两个按钮都隐藏。 Antd有提供两个参数用于单独修改确定、取消按钮:对于确定按钮,设置:ok-button-props="{ style: { display: ‘none’ } }";对于取消按钮,设置:cancel-button-props="{ style: { display: ‘none’ } }"。这样就能快速隐藏对应按钮了。 那么以上都是在template中隐藏,但单我们使用this.$confir