Modal组件点击确定阻止关闭的问题

[justnowanna]

Modal点击确定自动关闭，无法阻止关闭，即使是提供v-model绑定的，也没办法阻止关闭。下面给了一个官网的示例，在点击确定的时候将this.modal1改为true，但是并没有阻止Modal的自动关闭，并且会导致下一次点击按钮不会打开Modal

iView 版本号

2.0.0-rc.17

操作系统/浏览器 版本号

Win10/Chrome 56

Vue 版本号

^2.2.6

能够复现问题的在线示例（bug 相关不提供在线示例将直接 close）

https://jsfiddle.net/galence/p69go9rc/2/

复现步骤

如题

问题现象，以及你期望的结果是怎样的?

如题

你估计可能的原因是什么（选填）？

如题

[itpretty]

可以用 slot 自定义“确定”按钮，这样就可以避开组件内置的 @On-ok, @on-cancel

[justnowanna]

@itpretty 谢谢回答，slot是可以的，只是稍微有点麻烦，我本来以为Modal组件应该是会实现这个功能的

[IrvingZhao]

我看了一下源码，如果是用 $Modal.confirm 之类的打开的话，可以尝试 loading设置为true 这样在单击确定后，会进入等待状态，按钮也同样会进入等待状态，然后手动关闭窗体就好了

[dean5277]

loading处理，不过这样有点麻烦，我也是用 slot了

[justnowanna]

我也知道slot可以实现，但是就是不知道官方的意思是用什么实现？官方不做这个肯定还是有他的道理，但是我确实没有明白过来。希望@icarusion 能帮忙解答一下吗？谢谢

[lvqingan]

感觉这块确实有点麻烦，通过控制loading来阻止关闭，写起来有点别扭；使用slot重写按钮，感觉在重复造轮子，希望能解决这个问题

[leixu2txtek]

#597

[kulelikule]

这个问题我也遇到了，点击确定后能否根据返回的是true还是false来决定是否关闭Modal

[bcw104]

@icarusion ok button的loading状态直接跟loading属性绑定，让用户自己来处理状态不是更好吗？

[YikaJ]

Modal 的 visible 是有点奇怪，内置一个，外置一个。确实统一成外置，交给用户处理对双方都轻松。

[likeswinds]

来看async的例子

 this.$refs[name].validate(async (valid) => {
    if (valid) {
      this.loading = false 
      let res= await this.fetchGet('***', {})
      if (res == null) {
        this.$Message.error('*****')
        this.loading = true 
      } else { 
        this.model = false
        this.loading = true
      } 
    } else {
      this.$Message.error('表单验证失败!');
     }
 })

[pawoma]

点击确定后能否根据返回的是true还是false来决定是否关闭Modal，这样体验会更好点

[oleorz]

应该有个$event参数进来可以阻止冒泡。 vue 事件不是都可以有这个$event?

[GloryXia]

确实如此，判断确定之后是否关闭，交给我们自己比较好

[YikaJ]

现在来改，恐怕会有 Break Change，也不太方便了。需要好好考虑一下怎么解决这个问题比较好。

[cuitianze]

@IrvingZhao 如何让按钮退出loading呢？

[shaoyikai]

还是增加这个功能比较好，挺常用的。

[pawoma]

最简单的需求，Modal里面有个输入框，点击确定提交输入内容，
如果用this.$Modal.confirm实现，输入为空，点击onOk 时 不关闭Modal, 按照官网示例，加上loading：true，确定按钮会一直转圈圈，this.loading= false， 也不管用

[rxxy]

最简单的需求，Modal里面有个输入框，点击确定提交输入内容，
如果用this.$Modal.confirm实现，输入为空，点击onOk 时 不关闭Modal, 按照官网示例，加上loading：true，确定按钮会一直转圈圈，this.loading= false， 也不管用

是的，我也遇到这个问题，使用方式可以有办法实现，但是使用这种api的方式就实现不了的，貌似没办法数据绑定？

[yuanhui-web]

官方应该提供是否手动关闭的参数，类似ionic,
this.$nextTick(() => { this.loading = true; });虽然可以解决，但是文档上面没有任何说明，今天碰见这个问题，找了蛮久。

[Pszz]

/// Template 
<Modal v-model="modal" @on-ok="onClose"  :loading="loading">

/// Script
data () {
   return {
        modal: false,
        loading: true
    }
  },
methods:{
  onClose(){
      // Other Code
     this.onCloseLoading() 
  },
  onCloseLoading () {
      this.loading = false
      setTimeout(() => {
        this.loading = true
      })
  }
}

[woke-T]

没错，这样很烦

[selmalee]

如果开发者传递了on-cancel方法或者on-visible-change，就不应该调用关闭的方法，而是调用开发者传递的方法。
子组件不应该改变父组件传递的prop，应该由开发者决定是否关闭。

[ChaoZhQua]

官方应该提供是否手动关闭的参数，类似ionic,
this.$nextTick(() => { this.loading = true; });虽然可以解决，但是文档上面没有任何说明，今天碰见这个问题，找了蛮久。

没有效果

[kooriookami]

可以用promise

const sleep = (time = 1000) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

await new Promise((resolve) => {
  this.$Modal.confirm({
    onOk: () => resolve(true),
    onCancel: () => resolve(false),
  });
});
await sleep(500);