vue popup

vue-popup

Vue 2.x Cliquez sur le composant du menu

caractéristiques:

• Calculer dynamiquement la position de la boîte contextuelle
• Détection du bord pour garantir que le bord du cadre pop-up ne dépasse pas la zone de vue
• Une seule fenêtre contextuelle peut correspondre à plusieurs éléments de déclenchement (plusieurs éléments sont écrits sous le même modèle)

Installer

Monnaie

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

NPM

npm install @xunlei/vue-popup --save

utiliser

Tout d'abord, vous devez enregistrer le plugin.

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

Vue . use ( VuePopup )

Utilisez le composant popup dans votre fichier .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 >

Ajoutez une référence ref sur votre composant popup et utilisez la directive v-popup pour mapper le bouton dans la boîte contextuelle. display est utilisée pour configurer si la boîte contextuelle est visible.

Voici un exemple simple en ligne.

interface

Soutenir

Nom d'attribut	décrire	taper	Valeur facultative	valeur par défaut
append-to-body	Mettez-le sous le corps	Booléen	-	vrai
de classe de flèche	Classe d'Arrow	Chaîne	-	-
Direction	Direction de la boîte contextuelle	Chaîne	TOP / TOPSTART / TOPEND / Right / Rightstart / droite / inférieur / inférieur / Bottomend / Left / LeftStart / Leftend	bas
Affichage (.Sync)	Est-ce visible	Booléen	-	FAUX
rembourrage	Espacement entre la boîte contextuelle et l'élément de déclenchement	Nombre	-	0
déclenchement	Le type d'événement qui déclenche la boîte pop-up	Chaîne	Veiller / Focus / Click	flotter
salon de défilement	La boîte contextuelle est-elle visible lorsque la page fait défiler	Booléen	-	vrai

événement

Nom de l'événement	décrire	Paramètres de rappel
montrer	Événement d'affichage de la boîte contextuelle	valeur
Cacher	La boîte pop-up cache les événements	valeur

instruction

v-popup

• Description: Des directives doivent être ajoutées à l'élément qui déclenche la boîte contextuelle.

• paramètre:

  • popupRef (required) - utilisé pour correspondre aux boîtes contextuelles spécifiques.

• taper:

  • any (optional) - Paramètre de rappel passé lorsque l'événement est déclenché.

• Exemple:

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

style

Le composant pop-up ajoutera uniquement les styles et les classes nécessaires, tels que le haut, la gauche ... le style spécifique doit être donné par l'utilisateur.

Lorsque la boîte contextuelle modifie la direction, les quatre classes suivantes seront ajoutées à l'élément racine de la boîte contextuelle pour correspondre aux styles dans différentes directions.

• Lorsque la boîte contextuelle est au-dessus de l'élément de déclenchement: popup-top
• Lorsque la boîte contextuelle est en dessous de l'élément de déclenchement: popup-fond
• Lorsque la boîte contextuelle est déclenchée à gauche de l'élément: popup-gauche
• Lorsque la boîte contextuelle est déclenchée à droite de l'élément: popup-droite

Construire des étapes

 # 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

Licence

Mit