vue popup

Vue-Popup

Vue 2.x mit der rechten Maustaste der Menükomponente

Merkmal:

• Dynamisch Popup-Box-Position berechnen
• Kantenerkennung, um sicherzustellen, dass der Rand des Popup-Rahmens den Ansichtsbereich nicht überschreitet
• Ein einzelnes Popup kann mehrere Triggerelemente übereinstimmen (mehrere Elemente werden unter derselben Vorlage geschrieben)

Installieren

CDN

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

NPM

npm install @xunlei/vue-popup --save

verwenden

Zunächst müssen Sie das Plugin registrieren.

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

Vue . use ( VuePopup )

Verwenden Sie popup -Komponente in Ihrer .vue -Datei.

 < 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 >

Fügen Sie eine ref -Referenz für Ihre popup -Komponente hinzu und verwenden Sie die v-popup -Direktive, um die Schaltfläche mit dem Popup-Feld zuzuordnen. display Anzeigefunktion wird verwendet, um zu konfigurieren, ob die Popup-Box sichtbar ist.

Hier ist ein einfaches Online -Beispiel.

Schnittstelle

Stütze

Attributname	beschreiben	Typ	Optionaler Wert	Standardwert
ankörpern	Stelle es unter Körper	Boolean	- -	WAHR
Pfeilklasse	Arrows Klasse	Saite	- -	- -
Richtung	Popup-Box-Richtung	Saite	obere/oberstart/topend/rechts/rechts start/rightend/boden-/bodenstart/bodenend/links/links/links	unten
Display (.Sync)	Ist es sichtbar?	Boolean	- -	FALSCH
Polsterung	Abstand zwischen Popup-Box und Triggerelement	Nummer	- -	0
auslösen	Der Ereignisentyp, der die Popup-Box auslöst	Saite	schweben / fokus / klicken	schweben
Scrollshow	Ist die Popup-Box sichtbar, wenn die Seite scrollen	Boolean	- -	WAHR

Ereignis

Ereignisname	beschreiben	Rückrufparameter
zeigen	Popup-Box Display-Ereignis	Wert
Verstecken	Pop-up-Box verbirgt Ereignisse	Wert

Anweisung

v-popup

• Beschreibung: Anweisungen müssen dem Element hinzugefügt werden, das die Popup-Box auslöst.

• Parameter:

  • popupRef (required) - Wird verwendet, um bestimmte Popup -Boxen anzupassen.

• Typ:

  • any (optional) - Rückrufparameter übergeben, wenn das Ereignis ausgelöst wird.

• Beispiel:

 < 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 >

Stil

Die Popup-Komponente fügt nur die erforderlichen Stile und Klassen hinzu, wie z. B. oben, links ... Der spezifische Stil muss vom Benutzer angegeben werden.

Wenn das Popup-Box die Richtung ändert, werden die folgenden vier Klassen zum Stammelement des Popup-Boxs hinzugefügt, um den Stilen in verschiedene Richtungen zu entsprechen.

• Wenn das Popup-Box über dem Triggerelement steht: Popup-Top
• Wenn sich das Popup-Box unter dem Triggerelement befindet: Popup-Bottom
• Wenn die Popup-Box links vom Element ausgelöst wird: Popup-Links
• Wenn die Popup-Box rechts neben dem Element ausgelöst wird: Popup-Right

Schritte erstellen

 # 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

Lizenz

MIT