vue 提示框modal_ant design vue Modal 对话框和表单的使用

对话框基本使用

显示模态框

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',</