vue popup

Vue-Popup

Vue 2.x Компонент меню правой кнопкой мыши

Характеристика:

• Динамически вычислить положение всплывающего окна
• Обнаружение краев, чтобы гарантировать, что край всплывающей рамы не превышает область обзора
• Одно всплывающее окно может соответствовать нескольким элементам триггера (несколько элементов записаны под одним и тем же шаблоном)

Установить

CDN

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

Npm

npm install @xunlei/vue-popup --save

использовать

Во -первых, вам нужно зарегистрировать плагин.

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

Vue . use ( VuePopup )

Используйте popup компонент в вашем файле .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 >

Добавьте ссылку на ref в свой popup компонент и используйте директиву v-popup чтобы составить кнопку на всплывающее окно. Функция display используется для настройки того, виден ли всплывающая окно.

Вот простой онлайн -пример.

интерфейс

Проп

Имя атрибута	описывать	тип	Необязательное значение	значение по умолчанию
Приложение к телу	Положить это под телом	Логический	-	истинный
стрелка	Класс стрелы	Нить	-	-
Направление	Направление всплывающей коробки	Нить	Top/TopStart/Topend/RightStart/RightStart/rightEd/notem/notemstart/bottomend/left/LeftStart/Leftend	нижний
дисплей (.sync)	Это видно	Логический	-	ЛОЖЬ
прокладка	Расстояние между всплывающей коробкой и триггерным элементом	Число	-	0
курок	Тип события, который запускает всплывающее окно	Нить	Вворить / фокусировать / щелкнуть	прокачать
свиток-шоу	Является ли всплывающее окно видимым при прокрутке страницы	Логический	-	истинный

событие

Название события	описывать	Параметры обратного вызова
показывать	Событие отображения всплывающего окна	ценить
Скрывать	Всплывающая коробка скрывает события	ценить

инструкция

v-popup

• Описание: директивы должны быть добавлены в элемент, который запускает всплывающее окно.

• Параметр:

  • popupRef (required) - используется для сопоставления конкретных всплывающих коробок.

• тип:

  • any (optional) - параметр обратного вызовов пройден, когда событие запускается.

• Пример:

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

стиль

Внутренний компонент будет добавлять только необходимые стили и классы, такие как топ, слева ... конкретный стиль должен быть предоставлен пользователем.

Когда всплывающее окно изменяется направление, следующие четыре класса будут добавлены в корневой элемент всплывающего окна, чтобы соответствовать стилям в разных направлениях.

• Когда всплывающее окно находится над триггерным элементом: всплывающее окно
• Когда всплывающее окно находится под триггерным элементом: всплывающее дно.
• Когда всплывающее окно запускается слева от элемента: всплывающее левое
• Когда всплывающее окно запускается справа от элемента: всплывающее правое

Построить шаги

 # 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

Лицензия

Грань