Dialog

The dialog component is used for popup-style interactions, supporting custom content and layout.

Basic Usage

The basic dialog includes a mask layer, content area, and close operation.

Title for custom

Here is some content and the content is very long, and you can put everything you want here.

Title for custom

Here is some content and the content is very long, and you can put everything you want here.

Title for custom

Here is some content and the content is very long, and you can put everything you want here.

在 github 中打开

展开代码

复制代码

<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(false)
const show1 = ref(false)
const show2 = ref(false)
</script>

<template>
  <div class="flex justify-between">
    <ol-button @click="show = !show">
      Left:{{ show }}
    </ol-button>
    <ol-button @click="show1 = !show1">
      Center:{{ show1 }}
    </ol-button>
    <ol-button @click="show2 = !show2">
      Right:{{ show2 }}
    </ol-button>
  </div>
  <ol-dialog v-model:show="show">
    <ol-dialog-card class="w-120 min-w-80 shadow-lg rounded-lg" @close="show = !show">
      <template #header>
        <div class="text-xl font-bold">
          Title for custom
        </div>
      </template>
      <template #content>
        <div class="p-4 text-gray-600 dark:text-gray-200 leading-6">
          Here is some content and the content is very long, and you can put everything you want here.
        </div>
      </template>
      <template #footer>
        <div class="flex justify-end space-x-2">
          <ol-button type="secondary" @click="show = !show">
            Cancel
          </ol-button>
          <ol-button type="primary" @click="show = !show">
            Confirm
          </ol-button>
        </div>
      </template>
    </ol-dialog-card>
  </ol-dialog>
  <ol-dialog v-model:show="show1">
    <ol-dialog-card class="w-120 min-w-80 shadow-lg rounded-lg" @close="show1 = !show1">
      <template #header>
        <div class="text-xl font-bold border-b border-gray-200">
          Title for custom
        </div>
      </template>
      <template #content>
        <div class="p-4 text-gray-600 dark:text-gray-200 leading-6">
          Here is some content and the content is very long, and you can put everything you want here.
        </div>
      </template>
      <template #footer>
        <div class="flex justify-end space-x-2">
          <ol-button type="secondary" @click="show1 = !show1">
            Cancel
          </ol-button>
          <ol-button type="primary" @click="show1 = !show1">
            Confirm
          </ol-button>
        </div>
      </template>
    </ol-dialog-card>
  </ol-dialog>
  <ol-dialog v-model:show="show2">
    <ol-dialog-card class="w-120 min-w-80 shadow-lg rounded-lg" @close="show2 = !show2">
      <template #header>
        <div class="text-xl font-bold border-b border-gray-200">
          Title for custom
        </div>
      </template>
      <template #content>
        <div class="p-4 text-gray-600 dark:text-gray-200 leading-6">
          Here is some content and the content is very long, and you can put everything you want here.
        </div>
      </template>
      <template #footer>
        <div class="flex justify-end space-x-2">
          <ol-button type="secondary" @click="show2 = !show2">
            Cancel
          </ol-button>
          <ol-button type="primary" @click="show2 = !show2">
            Confirm
          </ol-button>
        </div>
      </template>
    </ol-dialog-card>
  </ol-dialog>
</template>

Component Structure

The Dialog component consists of the following parts:

• <ol-dialog>: Dialog container
• <ol-dialog-card>: Card-style content container
  • Inherits the structure of the Card component (Header/Content/Footer)

Parameter Configuration

Parameter Name	Description	Type	Default Value
show	Controls display	boolean	false
mask	Displays mask	boolean	true
maskClickClose	Closes on mask click	boolean	true

Events

• close: Triggered when the dialog is closed