VUE + IVIEW-related issues (a): model box problem

It was a JAVA development, for VUE understanding only, used today to do a background screen to iview when the model box, record

 <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>

First, the first question, just do not want to model box is closed, set

mask-closable=false

The second question: I hope centered model box

Increase Style

class-name="vertical-center-modal"

Style code is as follows:

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

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

The third question: avoid duplicate clicks

Increase loading

:loading="addLoading"

But this can not be recovered after one click, it requires additional processing, the processing code is as follows

            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;
                   });
                });
            },