动态对话框

可以使用 DialogService 动态创建对话框，并将任何组件作为内容。

导入 #


import DynamicDialog from 'primevue/dynamicdialog';

对话框服务 #

应用程序中需要一个共享的对话框实例，理想的位置是在主应用程序模板中定义一次。


<DynamicDialog />

动态对话框通过 DialogService 控制，需要将其作为应用程序插件安装。


import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';

const app = createApp(App);
app.use(DialogService);

该服务可通过 Composition API 的 useDialog 函数或 Options API 的应用程序的 $dialog 属性获得。


/* Composition API */
import { useDialog } from 'primevue/usedialog';

const dialog = useDialog();

/* Options API */
const dialog = this.$dialog;

打开 #

DialogService 的 open 函数用于打开对话框。第一个参数是要加载的组件，第二个参数是自定义对话框的配置对象。


import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog';

const dialog = useDialog();

const showProducts = () => {
    dialog.open(ProductListDemo, {});
}

该组件也可以异步加载，这种方法在条件情况下很有用，并且可以提高初始加载时间。


import { useDialog } from 'primevue/usedialog';

const dialog = useDialog();

const dynamicComponent = defineAsyncComponent(() => import('./ProductListDemo.vue'));

const showProducts = () => {
    dialog.open(dynamicComponent, {});
}

自定义 #

DynamicDialog 内部使用 Dialog 组件，请访问对话框以获取有关可用 props 的更多信息。


import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog';

const dialog = useDialog();

const showProducts = () => {
    dialog.open(ProductListDemo, {
        props: {
            header: 'Product List',
            style: {
                width: '50vw',
            },
            breakpoints:{
                '960px': '75vw',
                '640px': '90vw'
            },
            modal: true
        }
    });
}

关闭 #

close 函数通过 dialogRef 提供，该 dialogRef 被注入到由对话框加载的组件中。


import { inject } from "vue";

const dialogRef = inject('dialogRef');

const closeDialog = () => {
    dialogRef.value.close();
}

传递数据 #

使用 data 属性在打开对话框时传递参数，内部组件稍后可以使用 dialogRef 访问此数据。


const dialog = useDialog();

const showProducts = () => {
    dialog.open(ProductListDemo, {
        data: {
            user: 'primetime'
        }
    });
}


import { inject, onMounted } from "vue";

const dialogRef = inject('dialogRef');

onMounted(() => {
    const params = dialogRef.value.data; // {user: 'primetime'}
})

同样，在隐藏对话框时，从 onClose 回调接收传递给 close 函数的任何参数。


const dialog = useDialog();

const showProducts = () => {
    dialog.open(ProductListDemo, {
        onClose: (opt) => {
            const callbackParams = opt.data; // {selectedId: 12}
        }
    });
}


import { inject } from "vue";

const dialogRef = inject('dialogRef');

const closeDialog = () => {
    dialogRef.value.close({
        selectedId: 12
    });
}

事件 #

emits 对象定义用于处理对话框内组件发出的事件的回调。


import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog';

const dialog = useDialog();

const showProducts = () => {
    dialog.open(ProductListDemo, {
        onCancel: (e) => {
            console.log(e);  // {user: 'primetime'}
        }
    });
}


<script setup>
/* ProductListDemo.vue */
const emit = defineEmits(['cancel', 'save'])

function buttonClick() {
    emit('cancel', {user: 'primetime'});
}
</script>

示例 #

一个示例实现，演示如何异步加载组件、嵌套内容和传递数据。


<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />

<DynamicDialog />

无障碍 #

请访问对话框组件的无障碍部分以获取更多信息。