Vue Component for Creating Modal using Tailwind CSS

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

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

---

Vue Tailwind Modal

Vue component for creating modal using Tailwind CSS.

Project setup

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

Usage

Import styles from library (for example, in main.js file)

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

Js

Global installation

In your main.js file:

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

Js

Inside the component

In your component (.vue file):

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

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

Js

After installation, use like any other component:

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

HTML

To show and hide a modal window, just pass the appropriate boolean true or false to the: showing attribute.

By default, the component will display the close button of the modal window in the upper right corner of the screen.

You can remove the button by passing a boolean false to the: showClose attribute.

Closing a modal window with a standard button (with: showClose = “true”) generates 2 events:

• update: showing event with value false.
• close event

You can handle both of these events as in the example above.

Download Details:

Author: OCRVblockchain
Download Link: Download The Source Code
Official Website: https://github.com/OCRVblockchain/vue-tailwind-modal

#vue #tailwind #tailwindcss #css