当我们使用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"插槽来实现点击确认而使对话框不消失
原文:https://www.cnblogs.com/shiyingxyj/p/14921878.html