本人是个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;
});
});
},