ダイナミックダイアログ

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* 関数は、ダイアログを開くために使用されます。最初のパラメーターはロードするコンポーネント、2 番目のパラメーターはダイアログをカスタマイズするための設定オブジェクトです。


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 について詳しくは、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 />

アクセシビリティ #

詳細については、dialog コンポーネントのアクセシビリティセクションをご覧ください。