Popover

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Uso básico

Popover is built with ElTooltip. Así que para algunos atributos duplicados, por favor consulte la documentación del Tooltip.

Activación virtual

Como el Tooltip, un Popover puede ser activado por elementos virtuales; si su caso de uso incluye separar el elemento de activación y el elemento de contenido, definitivamente debe usar el mecanismo, normalmente usamos #reference para colocar nuestro elemento desencadenante, con la API de triggering-element puede establecer su elemento desencadenante en cualquier lugar que desee, pero tenga en cuenta que el elemento de activación debe ser un elemento que acepte los eventos de mouse y keyboard.

WARNING

v-popover está a punto de ser obsoleta, por favor use virtual-ref como alternativa.

Contenido rico

Otros componentes/elementos pueden ser anidados en el popover. A continuación se muestra un ejemplo de tabla anidada.

Operación anidada

Por supuesto, puede anidar otras operaciones. Es más ligero que usar un dialog.

Directivas

Aún puede usar popover en la forma de directiva, pero esto no es recomendable, ya que esto hace que su aplicación sea complicada, puede referirse la Activación virtual para más información.

Atributos

Nombre	Descripción	Tipo	Valores Aceptados	Por defecto
trigger	cómo se dispara el popover	string	click/focus/hover/contextmenu	hover
title	título del popover	string	—	—
effect	Popover tiene dos temas: `dark` y `light`	string	string	light
content	contenido del popover, puede ser sustituido por un default `slot`	string	—	—
width	ancho del popover	string / number	—	Min width 150px
placement	posición del popover	string	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
disabled	si el popover está deshabilitado	boolean	—	false
visible / v-model:visible	si el popover está visible	Boolean	—	false
offset	popover offset, `Popover` is built with `Tooltip`, offset of `Popover` is `undefined`, but offset of `Tooltip` is 12	number	—	12
transition	animación de transición del popover	string	—	el-fade-in-linear
show-arrow	si una flecha del tooltip es mostrada o no. Para obtener más información, consulte ElPopper	boolean	—	true
popper-options	parámetros para popper.js	object	por favor consulte popper.js	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
popper-class	nombre de clase personalizada para el componente	string	—	—
popper-style	estilo personalizado para el popover	string / object	—	—
show-after	retraso de la apariencia, en milisegundos	number	—	0
hide-after	retraso de la desaparición, en milisegundos	number	—	200
auto-close	tiempo de espera en milisegundos para ocultar el tooltip	number	—	0
tabindex	tabindex del Popover	number	—	—
teleported	si el desplegable del popover se teletransporta al body	boolean	true / false	true
persistent	cuando el popover esté inactivo y `persistent` sea `false`, el popover será destruido	boolean	—	true

Slots

Nombre	Descripción
—	texto contenido en popover
reference	Elemento HTML que dispara el popover

Eventos

Name	Descripción	Parámetros
show	se dispara cuando se muestra el popover	—
before-enter	se dispara cuando la transición de entrada comienza	—
after-enter	se dispara cuando la transición de entrada termina	—
hide	se dispara cuando se oculta el popover	—
before-leave	se dispara cuando la transición de salida comienza	—
after-leave	se dispara cuando la transición de salida termina	—