Vue Tailwind Modal

Vue компонент для создания модальных окон, использующий Tailwind CSS.

Установка проекта

npm install --save @ocrv/vue-tailwind-modal

Использование

Импортируйте стили из библиотеки (например, в main.js файле)

import '@ocrv/vue-tailwind-modal/styles'

Глобальная установка

В вашем main.js файле:

import VueTailwindModal from "@ocrv/vue-tailwind-modal"
Vue.component("VueTailwindModal", VueTailwindModal)

Внутри компонента

В вашем компоненте (.vue файл):

import VueTailwindModal from '@ocrv/vue-tailwind-modal'

export default {
  components: {
	VueTailwindModal,
	...
  },
  ...

После установки, используйте как и любой другой компонент:

<vue-tailwind-modal
  :showing="true"
  :showClose="true"
  @update:showing="showing = $event"
  @close="afterClose()"
>
<!-- Вставьте здесь содержимое вашего модального окна -->
</vue-tailwind-modal>

Для показа и скрытия модального окна достаточно передать соответствующие логические true или false в :showing аттрибут.
По-умолчанию, компонент будет отображать кнопку закрытия модального окна в правом верхнем углу экрана.
Убрать кнопку можно передав логическое false в :showClose аттрибут.

Закрытие модального окна стандартной кнопкой (при :showClose="true") генерирует 2 события:

• update:showing событие со значением false.
• событие close

Вы можете обрабатывать оба этих события, как в примере выше.