Nanoscale Parts Manufacturing

    @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

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

    Install

    npm i @ocrv/vue-tailwind-modal

    DownloadsWeekly Downloads

    4

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    15.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • stdi0