iview组件this.$modal.confirm与loading出现的问题

这是iview的this.$Modal.confirm(config)生成的模态框。

问题：当没填写原因就点击确定按钮后，提示词正确出现，但是模态框的确定按钮有加载圈。
想要的效果：如果没填写原因时，点击确定按钮，提示后，模态框不关闭且确定按钮无加载圈，并且还可以再次点击。
希望大家帮忙看一下，有什么好办法可以解决？

 this.$Modal.confirm({
          title: '确定要关闭吗？',
          loading:this.loading,   //this.loading初始值是true
          render: (h) => {
            return h('div', {
                style: {
                  width:'93%',
                  marginLeft:'6%'
                }
              },[
              h('span', {
                style: {
                  color: '#495060',
                  fontSize: '14px'
                }
              }, '请填写关闭的原因：'),
              h('Input', {
                props: {
                  value: this.closeReason,
                  placeholder: '请输入原因',
                  maxlength:50,
                  showWordLimit:true,
                },
                style: {
                  marginTop:'10px'
                },
                on: {
                  input: (val) => {
                    this.closeReason = val;
                  }
                }
              })
            ])
          },
          onOk: () => {
            if(!this.closeReason) {
              // this.closeReason 是Input框双向绑定的值，原因文本
              this.loading = false
              this.$Message.error('请填写关闭原因!')
              setTimeout(()=>{
                   this.loading = true
              },0)
            }else {
                  this.$Modal.remove()
                  this.$Message.success('关闭成功')
            }
          }
        })

老老实实用 Modal 组件吧，绑定value的时候也不要用v-modal双向绑定

【以下回答由 GPT 生成】

答案： 根据你提供的代码，我发现原因在于在点击确定按钮后，当this.closeReason为空时，将this.loading设置为false，并且通过setTimeout将this.loading重新设置为true。这样会导致模态框一直显示加载圈。

为了解决这个问题，你可以使用this.$refs来引用模态框，在点击确定按钮时手动关闭模态框。具体步骤如下：

1. 给模态框添加ref属性，以便在代码中引用它：

this.$Modal.confirm({
    ref: 'myModal', // 添加ref属性
    ...
})

1. 在点击确定按钮的onOk函数中关闭模态框：

this.$refs.myModal.remove(); //手动关闭模态框

根据这种解决方法，你可以修改代码如下：

this.$Modal.confirm({
    ref: 'myModal',
    title: '确定要关闭吗？',
    loading: this.loading,
    render: (h) => {
        return h('div', {
            style: {
                width: '93%',
                marginLeft: '6%'
            }
        },[
            h('span', {
                style: {
                    color: '#495060',
                    fontSize: '14px'
                }
            }, '请填写关闭的原因：'),
            h('Input', {
                props: {
                    value: this.closeReason,
                    placeholder: '请输入原因',
                    maxlength: 50,
                    showWordLimit: true,
                },
                style: {
                    marginTop: '10px'
                },
                on: {
                    input: (val) => {
                        this.closeReason = val;
                    }
                }
            })
        ])
    },
    onOk: () => {
        if(!this.closeReason) {
            this.loading = false;
            this.$Message.error('请填写关闭原因!');
        } else {
            this.$refs.myModal.remove(); //手动关闭模态框
            this.$Message.success('关闭成功');
        }
    }
})

这样修改后，当用户没有填写关闭原因时，提示信息会正确显示，模态框不会关闭且确定按钮不显示加载圈，并且用户可以再次点击确定按钮。