对话框基本使用
显示模态框
title="模态框标题"
:visible="visible"
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
>
{ { ModalText }}
export default {
data() {
return {
ModalText: 'Content of the modal',
visible: false,
confirmLoading: false,
};
},
methods: {
//显示模态框
showModal() {
this.visible = true;
},
//点击ok
handleOk(e) {
this.ModalText = 'The modal will be closed after two seconds';
this.confirmLoading = true;
setTimeout(() => {
this.visible = false;
this.confirmLoading = false;
}, 2000);
},
//点击cancel
handleCancel(e) {
console.log('Clicked cancel button');
this.visible = false;
},
},
};
效果
设置对话框确认和取消按钮的文字
ok-text : 设置确认按钮文字
cancel-text : 设置取消按钮文字
例:
title="模态框标题"
ok-text="确认"
cancel-text="取消"
:visible="visible"
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
>
效果
对话框结合form表单使用
方式1:自定义组件模板的方式
显示模态框
ref="collectionForm"
:visible="visible"
@cancel="handleCancel"
@create="handleCreate"
/>
const CollectionCreateForm = {
props: ['visible'],
beforeCreate() {
this.form = this.$form.createForm(this, { name: 'form_in_modal' });
},
template: `
:visible="visible"
title='模态框标题'
okText='确认'
cancel-text="取消"
@cancel="() => { $emit('cancel') }"
@ok="() => { $emit('create') }"
>
v-decorator="[
'title',</