https://github.com/ocrvblockchain/vue-tailwind-modal

Vue Tailwind Modal
https://github.com/ocrvblockchain/vue-tailwind-modal

clean-design modal tailwind tailwind-css tailwindcss vue

Last synced: about 1 month ago
JSON representation

Vue Tailwind Modal

• Host: GitHub
• URL: https://github.com/ocrvblockchain/vue-tailwind-modal
• Owner: OCRVblockchain
• Created: 2021-02-07T13:22:08.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-10T14:10:15.000Z (almost 4 years ago)
• Last Synced: 2024-09-23T14:03:26.839Z (about 2 months ago)
• Topics: clean-design, modal, tailwind, tailwind-css, tailwindcss, vue
• Language: Vue
• Homepage:
• Size: 1.97 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue Tailwind Modal

![build](https://github.com/OCRVblockchain/vue-tailwind-modal/workflows/build/badge.svg)

![npm](https://img.shields.io/npm/dw/@ocrv/vue-tailwind-modal)

![npm](https://img.shields.io/npm/dt/@ocrv/vue-tailwind-modal)

Vue компонент для создания модальных окон, использующий [Tailwind CSS](https://tailwindcss.com).



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

```

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

```

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

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

```js

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

```

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

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

```js

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

Vue.component("VueTailwindModal", VueTailwindModal)

```

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

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

```js

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

export default {

  components: {

	VueTailwindModal,

	...

  },

  ...

```

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

```html

```

Для показа и скрытия модального окна достаточно передать соответствующие логические true или false в :showing аттрибут.  

По-умолчанию, компонент будет отображать кнопку закрытия модального окна в правом верхнем углу экрана.  

Убрать кнопку можно передав логическое false в :showClose аттрибут.  

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

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

- событие close

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