vue popup

vue-popup

Vue 2.x Clique com o botão direito do mouse componente

característica:

• Calcule dinamicamente a posição da caixa pop-up
• Detecção de arestas para garantir que a borda do quadro pop-up não exceda a área de visão
• Um único pop-up pode corresponder a vários elementos de gatilho (vários elementos são escritos no mesmo modelo)

Instalar

CDN

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

Npm

npm install @xunlei/vue-popup --save

usar

Primeiro, você precisa registrar o plug -in.

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

Vue . use ( VuePopup )

Use o componente popup no seu arquivo .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 >

Adicione uma referência de ref no seu componente popup e use a diretiva v-popup para mapear o botão na caixa pop-up. display é usado para configurar se a caixa pop-up é visível.

Aqui está um exemplo online simples.

interface

Prop

Nome do atributo	descrever	tipo	Valor opcional	valor padrão
anexar a corpo	Coloque -o sob o corpo	Booleano	-	verdadeiro
classe de seta	Aula de Arrow	Corda	-	-
Direção	Direção da caixa pop-up	Corda	top/topstart/topend/direita/direitstart/direita/bottom/bottomstart/bottomend/esquerda/esquerda/esquerda	fundo
exibição (.sync)	É visível	Booleano	-	falso
preenchimento	Espaçamento entre a caixa pop-up e o elemento de gatilho	Número	-	0
acionar	O tipo de evento que aciona a caixa pop-up	Corda	Passe o mouse / foco / clique	Passe o mouse
Scroll-Show	A caixa pop-up é visível quando a página está rolando	Booleano	-	verdadeiro

evento

Nome do evento	descrever	Parâmetros de retorno de chamada
mostrar	Evento de exibição de caixa pop-up	valor
Esconder	A caixa pop-up oculta eventos	valor

instrução

v-popup

• Descrição: As diretivas precisam ser adicionadas ao elemento que aciona a caixa pop-up.

• parâmetro:

  • popupRef (required) - Usado para corresponder a caixas pop -up específicas.

• tipo:

  • any (optional) - retorno de chamada passado quando o evento é acionado.

• Exemplo:

 < 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

O componente pop-up adicionará apenas estilos e classes necessários, como topo, esquerda ... o estilo específico precisa ser fornecido pelo usuário.

Quando a caixa pop-up mudar de direção, as quatro classes a seguir serão adicionadas ao elemento raiz da caixa pop-up para combinar com os estilos em diferentes direções.

• Quando a caixa pop-up está acima do elemento do gatilho: pop-up
• Quando a caixa pop-up está abaixo do elemento gatilho: PopUp-Bottom
• Quando a caixa pop-up é acionada à esquerda do elemento: pop-up-esquerda
• Quando a caixa pop-up é acionada à direita do elemento: Pop-Up-Right

Construir etapas

 # 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

Licença

Mit