動態對話框

使用 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 元件，請訪問對話框以獲取有關可用屬性的更多資訊。


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 取得。


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'}
})

同樣地，當隱藏對話框時，傳遞給 close 函式的任何參數都會從 onClose 回呼接收。


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

無障礙功能 #

有關更多資訊，請訪問對話框元件的輔助功能部分。