Dialog

对话框组件用于弹出式交互，支持自定义内容和布局。

基本用法

基础对话框包含遮罩层、内容区和关闭操作。

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">
            Cancel
          </ol-button>
          <ol-button type="primary">
            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">
            Cancel
          </ol-button>
          <ol-button type="primary">
            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">
            Cancel
          </ol-button>
          <ol-button type="primary">
            Confirm
          </ol-button>
        </div>
      </template>
    </ol-dialog-card>
  </ol-dialog>
</template>

组件结构

Dialog组件由以下部分组成：

• <ol-dialog>: 对话框容器
• <ol-dialog-card>: 卡片式内容容器
  • 继承Card组件的结构（Header/Content/Footer）

参数配置

参数名	说明	类型	默认值
show	控制显示	boolean	false
mask	显示遮罩	boolean	true
maskClickClose	点击遮罩关闭	boolean	true

事件

• close: 关闭对话框时触发