Dialog

Компонент модалки, всередину кладеться контент, логіка відкриття прописується ззовні

Dialog

As Component

  <template>
    <div>
      <VsDialog class="vsTailwind" title="Dialog" :visible.sync="visible">
        <div class="mb-6 p-4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam optio tempore in reiciendis maxime provident, expedita hic vero dolores iusto?
        </div>
        <div class="flex justify-end p-4">
          <VsButton @click="toggleModal" class="mr-2">Відмінити</VsButton>
          <VsButton @click="toggleModal" type="primary">Зберегти</VsButton>
        </div>
      </VsDialog>
      <VsButton @click="toggleModal">Open dialog</VsButton>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          visible: false,
        };
      },
      methods: {
        toggleModal() {
          this.visible = !this.visible;
        },
      },
    };
  </script>

Component props

Props	Required	Description	Default
title	No	Dialog title.	false
visible	Yes	Dialog visible state.	false

Component slots

Name	Description	Default
Default	Default slot without buttons and other features.	<template>...</template>
content	Slot with buttons dialog "Save", "Cancel".	<template #content></template>
footer	Slot for footer.	<template #footer></template>

Events

Name	Output
submit	HTMLElement
сancel	HTMLElement