vue popup

vue-popup

Vue 2.x Componente del menú de clic derecho

característica:

• Calcule dinámicamente la posición de la caja emergente
• Detección de borde para garantizar que el borde del marco emergente no exceda el área de la vista
• Una ventana emergente solo puede coincidir con múltiples elementos de activación (múltiples elementos se escriben bajo la misma plantilla)

Instalar

CDN

 < script src =" //cdn.jsdelivr.net/gh/beyoursun/vue-popup/dist/vue-popup.js " > </ script >

Npm

npm install @xunlei/vue-popup --save

usar

Primero, debe registrar el complemento.

 import Vue from 'vue'
import VuePopup from '@xunlei/vue-popup'

Vue . use ( VuePopup )

Use el componente popup en su archivo .vue .

 < template >
  < div >
    < popup ref =" popup1 " :display.sync =" showPop " >
      < h3 >标题</ h3 >
      < p >这是一段内容。 </ p >
    </ popup >
    < a v-popup:popup1 href =" javascript:; " >展示弹出框</ a >
  </ div >
</ template >

< script >
export default {
  data ( ) {
    return {
      showPop : false
    }
  }
}
</ script >

Agregue una referencia ref en su componente popup y use la Directiva v-popup para asignar el botón al cuadro emergente. display se utiliza para configurar si el cuadro emergente es visible.

Aquí hay un simple ejemplo en línea.

interfaz

Apuntalar

Nombre de atributo	describir	tipo	Valor opcional	valor predeterminado
anexar al cuerpo	Ponlo debajo del cuerpo	Booleano	-	verdadero
flecha	Clase de Arrow	Cadena	-	-
Dirección	Dirección de caja emergente	Cadena	top/topStart/topend/right/rightstart/rightend/bottom/bottomstart/bottomend/left/leftstart/leftend	abajo
Display (.sync)	Es visible	Booleano	-	FALSO
relleno	Espacio entre el cuadro emergente y el elemento de gatillo	Número	-	0
desencadenar	El tipo de evento que desencadena la caja emergente	Cadena	Desconocido / Focus / Haga clic	flotar
show de desplazamiento	¿Es visible el cuadro emergente cuando la página se desplaza	Booleano	-	verdadero

evento

Nombre del evento	describir	Parámetros de devolución de llamada
espectáculo	Evento de visualización de caja emergente	valor
Esconder	Eventos de escondites de caja emergente	valor

instrucción

v-popup

• Descripción: Las directivas deben agregarse al elemento que desencadena el cuadro emergente.

• parámetro:

  • popupRef (required) : se usa para combinar cajas emergentes específicas.

• tipo:

  • any (optional) se pasa cuando el evento se activa.

• Ejemplo:

 < popup
  ref =" popup1 "
  :display.sync =" showPop "
  @show =" handleShow "
  @hide =" handleHide " >
</ popup >
< a v-popup:popup1 =" val " > </ a >

< scirpt >
export default {
  ...
  methods: {
    handleShow (val) { },
    handleHide (val) { }
  }
}
</ script >

estilo

El componente emergente solo agregará los estilos y clases necesarios, como la parte superior, la izquierda ... El usuario debe dar el estilo específico.

Cuando el cuadro emergente cambia de dirección, se agregarán las siguientes cuatro clases al elemento raíz del cuadro emergente para que coincida con los estilos en diferentes direcciones.

• Cuando el cuadro emergente está por encima del elemento gatillo: emergente
• Cuando el cuadro emergente está debajo del elemento de gatillo: el fondo emergente
• Cuando el cuadro emergente se activa a la izquierda del elemento: emergente-izquierda
• Cuando el cuadro emergente se activa a la derecha del elemento: emergente

Pasos de construcción

 # clone the project repo
git clone https://github.com/beyoursun/vue-popup.git

# install dependencies
cd vue-popup && npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Licencia

MIT