Dialogをラップする要素を追加し、append-to="self"を指定する。
環境
- Vue 3.2
- PrimeVue 3.18
サンプルコード
<template> <div class="dialog"> <Dialog v-model:visible="true" append-to="self" > <template #header> Header </template> <template #footer> <Button label="OK" class="button" /> <Button label="Cancel" class="button" /> </template> </Dialog> </div> </template> <style lang="scss" scoped> .dialog { .button { width: 10rem; } } </style>
出力例
<style type="text/css">.dialog .button[data-v-80be5e4f] { width: 10rem; }</style> ...省略... <div class="dialog" data-v-80be5e4f=""> <div class="p-dialog-mask p-component-overlay p-component-overlay-enter" style="z-index: 1102;"> <div class="p-dialog p-component p-ripple-disabled" role="dialog" aria-modal="true" pv_id_33=""> <div class="p-dialog-header">...省略...</div> <div class="p-dialog-content">...省略...</div> <div class="p-dialog-footer"> <button class="p-button p-component p-button-outlined p-button-plain button" type="button" aria-label="OK" data-v-80be5e4f="">...省略...</button> <button class="p-button p-component p-button-outlined p-button-plain button" type="button" aria-label="Cancel" data-v-80be5e4f="">...省略...</button> </div> </div> </div> </div>
備考
- ラップする要素を指定しないと、ルートノードにdata属性が付与されない。
- append-to="self"を指定しないと、ラップする要素が出力されない。