Dialog 对话框 #

在保留当前页面状态的情况下，告知用户并承载相关操作。

TIP

在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress)。

[](data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgMjQgMjQiIHdpZHRoPSIxLjJlbSIgaGVpZ2h0PSIxLjJlbSIgY2xhc3M9ImxpbmstaWNvbiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTAgNnYySDV2MTFoMTF2LTVoMnY2YTEgMSAwIDAgMS0xIDFINGExIDEgMCAwIDEtMS0xVjdhMSAxIDAgMCAxIDEtMWg2Wm0xMS0zdjhoLTJWNi40MTNsLTcuNzkzIDcuNzk0bC0xLjQxNC0xLjQxNEwxNy41ODUgNUgxM1YzaDhaIiAvPjwvc3ZnPg==)

基本用法 #

Dialog 弹出一个对话框，适合需要定制性更大的场景。

需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。 Dialog 分为两个部分：body 和 footer，footer 需要具名为 footer 的 slot。 title 属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了 before-close 的用法。

点击打开 Dialog

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeXtmaWxsOnZhcigtLWtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5LCMyNjYxQkYpO3N0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwjMjY2MUJGKX08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSA0LjVWMkM5LjUgMS43MjM4NiA5LjI3NjE0IDEuNSA5IDEuNUgyQzEuNzIzODYgMS41IDEuNSAxLjcyMzg2IDEuNSAyVjExQzEuNSAxMS4yNzYxIDEuNzIzODYgMTEuNSAyIDExLjVINi41IiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PC9nPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSBrZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyIj48cGF0aCBkPSJNMTEgNC41SDdDNi43MjM4NiA0LjUgNi41IDQuNzIzODYgNi41IDVWMTRDNi41IDE0LjI3NjEgNi43MjM4NiAxNC41IDcgMTQuNUgxNEMxNC4yNzYxIDE0LjUgMTQuNSAxNC4yNzYxIDE0LjUgMTRWOEwxMSA0LjVaIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PHBhdGggZD0iTTEwLjUgNC41VjhDMTAuNSA4LjI3NjE0IDEwLjcyMzkgOC41IDExIDguNUgxNC41IiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PC9nPjwvc3ZnPg==)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgMi41TDYuNSAxMy41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgLz48cGF0aCBkPSJNMTEuNSA0TDE0LjI3NSA3LjcwMDAxQzE0LjQwODMgNy44Nzc3OSAxNC40MDgzIDguMTIyMjQgMTQuMjc1IDguMzAwMDFMMTEuNSAxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PHBhdGggZD0iTTQuNSA0TDEuNzI1IDcuNzAwMDFDMS41OTE2NyA3Ljg3Nzc5IDEuNTkxNjcgOC4xMjIyNCAxLjcyNSA4LjMwMDAxTDQuNSAxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PC9nPjwvc3ZnPg==)

TIP

before-close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

非模态框 #

无遮罩层，需传入触发元素 reference，弹出位置对齐触发元素左下角。可设置为允许拖动。

像 Tooltip一样，Dialog 可以由虚拟元素触发，这个功能就很适合使用在触发元素和展示内容元素是分开的场景。

点击打开 Dialog

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFye3N0cm9rZS13aWR0aDp2YXIoLS1rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyLCAxcHgpOyB9LmtkLWNvbG9yLWljb24tcHJpbWFyeXtmaWxsOiMzMzMzMzM7IGZpbGw6dmFyKC0ta2QtY29sb3ItaWNvbi1wcmltYXJ5LCAjMzMzMzMzKTsgc3Ryb2tlOiMzMzMzMzM7IHN0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyB9LmtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5e2ZpbGw6IzI2NjFCRjsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwgIzI2NjFCRik7IHN0cm9rZTojMjY2MUJGOyBzdHJva2U6dmFyKC0ta2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnksICMyNjYxQkYpOyB9PC9zdHlsZT48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgNC41VjJDOS41IDEuNzIzODYgOS4yNzYxNCAxLjUgOSAxLjVIMkMxLjcyMzg2IDEuNSAxLjUgMS43MjM4NiAxLjUgMlYxMUMxLjUgMTEuMjc2MSAxLjcyMzg2IDExLjUgMiAxMS41SDYuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTExIDQuNUg3QzYuNzIzODYgNC41IDYuNSA0LjcyMzg2IDYuNSA1VjE0QzYuNSAxNC4yNzYxIDYuNzIzODYgMTQuNSA3IDE0LjVIMTRDMTQuMjc2MSAxNC41IDE0LjUgMTQuMjc2MSAxNC41IDE0VjhMMTEgNC41WiIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMC41IDQuNVY4QzEwLjUgOC4yNzYxNCAxMC43MjM5IDguNSAxMSA4LjVIMTQuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48L3N2Zz4=)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c3R5bGU+LmtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXJ7c3Ryb2tlLXdpZHRoOnZhcigtLWtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIsIDFweCk7IH0ua2QtY29sb3ItaWNvbi1wcmltYXJ5e2ZpbGw6IzMzMzMzMzsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyBzdHJva2U6IzMzMzMzMzsgc3Ryb2tlOnZhcigtLWtkLWNvbG9yLWljb24tcHJpbWFyeSwgIzMzMzMzMyk7IH08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSAyLjVMNi41IDEzLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMS41IDRMMTQuMjc1IDcuNzAwMDFDMTQuNDA4MyA3Ljg3Nzc5IDE0LjQwODMgOC4xMjIyNCAxNC4yNzUgOC4zMDAwMUwxMS41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48cGF0aCBkPSJNNC41IDRMMS43MjUgNy43MDAwMUMxLjU5MTY3IDcuODc3NzkgMS41OTE2NyA4LjEyMjI0IDEuNzI1IDguMzAwMDFMNC41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48L2c+PC9zdmc+)