使用iView中的Modal组件点击确定使其不消失的方法

当我们使用iView中Modal组件时,如果直接使用对话框的组件时,点击确定便会隐藏对话框,但如果我们时把对话框当做表单来提交时,有时并不需要对话框消失,这时候可以用Modal中的插槽来完成

<Modal :title="submitTitle" v-model="addEmailModalVisible">     
 <Form
        ref="addEmailInformation"
        :model="addEmailInformation"
      >
        <FormItem label="邮件编号" prop="emailNo">
          <Input
            type="text"
            v-model="addEmailInformation.emailNo"
            placeholder="请输入邮件编号"
          ></Input>
        </FormItem>
        <FormItem label="邮件标题" prop="emailTitle">
          <Input
            type="text"
            v-model="addEmailInformation.emailTitle"
            placeholder="请输入邮件标题"
          ></Input>
        </FormItem>
        <FormItem label="邮件类型" prop="emailType">
          <Select v-model="addEmailInformation.emailType">
            <Option
              v-for="emailType in emailTypes"
              :key="emailType.name"
              :value="emailType.name"
              :label="emailType.label"
              >{{ emailType.name }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="收件人邮箱" prop="addresseeEmail">
          <Input
            type="text"
            v-model="addEmailInformation.addresseeEmail"
            placeholder="请输入收件人邮箱"
          ></Input>
        </FormItem>
        <FormItem label="邮件内容" prop="emailContent">
          <Input
            type="textarea"
            v-model="addEmailInformation.emailContent"
            placeholder="请输入邮箱内容"
            class="margin-top"
          ></Input>
        </FormItem>
      </Form>
      <template slot="footer">
        <!-- 对于具有验证,点击提交不能消失的对话框,必须使用这种插槽的用法 -->
        <Button type="text" @click="cancelModalVisible">取消</Button>
        <Button type="primary" @click="submitEmailInformation"></Button>
      </template>
</Modal>
<script>
  cancelModalVisible(){
    this.addEmailModalVisible = false
  }
</script>

 

对话框本身具有确认和取消键,但每次点击确认和取消对话框都将消失,若要使其对话框不消失,可以通过slot="footer"插槽来实现点击确认而使对话框不消失

  

使用iView中的Modal组件点击确定使其不消失的方法

上一篇:kafka-manager配置安装及Kerberos(CDH)认证


下一篇:[git] log中Merge branch 'master' of xxx的产生原因