VUE+IVIEW相关问题(一)：model框问题_mask-closable-优快云博客

本文分享了在后台界面开发中使用IView UI库的Modal弹窗组件的实践经验，包括如何防止意外关闭、实现居中布局及加载效果的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人是个JAVA开发，对于VUE仅限了解，今天在做一个后台界面的时候使用到iview的model框，记录下

 <Modal
        v-model="addModel"
        title="添加用户"
        ok-text = "确定"
        cancel-text = "取消"
        :loading="addLoading"
        :mask-closable="false"
         class-name="vertical-center-modal"
        @on-ok="saveSubmit"
        @on-cancel="saveCancel">
      <Form :model="userInfo" :label-width="80">
        <FormItem label="用户名">
            <Input v-model="userInfo.userName" placeholder="请输入用户名称"/>
        </FormItem>
        <FormItem label="性别">
            <RadioGroup v-model="userInfo.sex">
                <Radio label="male">男</Radio>
                <Radio label="female">女</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="邮箱">
            <Input v-model="userInfo.email" placeholder="请输入用户邮箱"/>
        </FormItem>
    </Form>
    </Modal>

首先第一个问题，不希望model框随便被关闭，设置

mask-closable=false

第二个问题：希望model框居中显示

增加样式

class-name="vertical-center-modal"

样式代码如下：

<style lang="less">
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
</style>

第三个问题：避免重复点击

增加loading

:loading="addLoading"

但是这样点击一次之后时无法恢复的，所以需要另外处理，处理代码如下

            saveSubmit(o){
                console.log(o)
                saveUser(this.userInfo).then((res) => {
                   console.log(res)
                }).catch((error) => {
                   this.$Message.error(error.response.data.message);
                   //失败关系
                   this.addLoading = false;
                   this.$nextTick(() => {
                     //下一次点击开启
                     this.addLoading = true;
                   });
                });
            },