Popover 弹出面板 #

TIP

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

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

基础用法 #

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。

trigger 属性被用来决定 popover 的触发方式，支持的触发方式： hover、click。如果你想手动控制它，可以设置 :visible 属性，手动模式下不支持esc键盘交互事件

Hover to activate Click to activate Manual to activate

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

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

位置 #

上左上边上右

左上左边左下

右上右边右下

下左下边下右

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

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

虚拟触发 #

像 Tooltip一样，Popover 可以由虚拟元素触发，这个功能就很适合使用在触发元素和展示内容元素是分开的场景。通常我们使用 #reference 来放置我们的触发元素，用 triggering-element API，您可以任意设置您的触发元素但注意到触发元素应该是接受 mouse 和 keyboard 事件的元素。