Iview: 建议Modal对话框新增点击确定可以手动阻止自动关闭Modal的功能

[dunizb]

目前貌似只要点击了确定按钮，无论如何Modal都会关闭，这很不好，尤其涉及Modal中有From校验的时候。

比如下面的例子：http://sandbox.runjs.cn/show/ytc60gu2
当用户名密码为空的时候，点击确定按钮不应该关闭窗口的。

这是个Bug还是还没有这个功能，或者已经有了是我使用姿势不对？

[icarusion]

能先仔细阅读下文档嘛。。。有异步的功能

[dunizb]

@icarusion 我知道有异步关闭，但异步关闭只是延时而已，我说的意思是确定按钮应该只是一个普通按钮，我没有手动调用方法关闭Modal外不应该有默认关闭行为

[icarusion]

异步的逻辑是自己控制的，什么时候关闭Modal取决于 props visible

[dunizb]

@icarusion 好吧，要实现这样的功能太不直接了，上面的例子我还是实现了http://runjs.cn/code/ytc60gu2 :raised_hands:

[yanghdx]

@dunizb 是否有更好的方式，当表单错误时，不关闭modal？

[rijn]

@icarusion Maybe we can assign the value returned be onOk function to the visibility of modal.

[dunizb]

@yanghdx 没有，你看我的例子。得配合form表单组建，加上异步关闭才可以实现

[yanghdx]

@dunizb 不用on-ok，用自定义footer可以实现

[dunizb]

@yanghdx 我那种一部关闭，和使用slot其实都麻烦，要额外写些代码，每个地方都得这样写，最好是Modal原生提供这样的Modal就好了

[icarusion]

@dunizb 你应该去思考，为什么iView不这样设计。

[klgd]

@icarusion modal的props中没有 visible 啊

[rijn]

Global modal can be closed by this.$Modal.remove()

[geekpeng]

@dunizb 我明白你的意思 因为我用的也遇到了这个问题.
不开 loading 验证失败后 modal 会自己关掉
开了 loading 验证失败后 button 一直是 loading 状态不能再次提交
如果这个时候去改 loading 的状态 下一次提现的时候如果验证失败还是会直接被关掉

你说的对 slot 可以解决这个问题的.
而且当然不需要每个地方都写啊. 你自己在这个的基本上 自己封装一个组件不就每个地方都可以了吗?

[dunizb]

@geekpeng 对，是可以再自己封装，现在用了这么久了iview也已经玩熟了，这些问题自然可以轻松解决。但是对于新手可能就不太友好了需要摸索一下，如果Modal原生增加一个是否自动关闭的开关属性岂不是更方便，就如给button按钮添加loading属性开一样，在操作成功后再去设置开关关闭

[leixu2txtek]

loading 的问题使用起来不方便
ajax 验证之后，loading 状态不好移除，没法再次点击。
各位 除了 自定义footer 还有别的好办法吗

[leixu2txtek]

应该在 ok 事件回调中 利用 return false 来阻止 modal 的关闭

[luckymore]

@geekpeng

开了loading 验证失败后 button 一直是 loading 状态不能再次提交
父组件改变loading可以影响子组件的，，，

if (validate) {
  ...dosomething
} else {
  this.loading = false
  this.$nextTick(() => {
    this.loading = true
  })
}

[CRONWMMM]

@luckymore 可以，解决了，不过如果去掉$nextTick，单独设置loading=false就会马上关闭，加上$nextTick将loading设置为true就不会关闭，请问原理是什么呢？

[huanggm]

目前了解到有两种实现方式：
第一种：初始化loading为true，配合nextTick切换loading的状态可以达到不关闭modal的效果
第二种：自定义footer
我现在用的是第二种方式。

其实有两个场景：
一个是表单验证（不需要loading的效果）
还有一个是发送表单给服务器端（可以使用loading效果）
这里还是建议官方把是否有loading和是否关闭modal区分开。

刚开始用iview，有不对的地方请指正。

[ghostcode]

遇到此问题的不少，确实造成了困惑。https://github.com/iview/iview/issues/1184　https://github.com/iview/iview/issues/597

[pawoma]

3.0 都出来了还没解决这个问题，额