@ocrv/vue-tailwind-modal

1.0.0 • Public • Published

Vue Tailwind Modal

build npm npm

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

Снимок экрана 2021-02-07 в 17 02 42

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

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

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

Package Sidebar

Install

npm i @ocrv/vue-tailwind-modal

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

15.1 kB

Total Files

5

Last publish

Collaborators

  • stdi0