Dialog 模态框

<template>
  <PreviewBlock title="基础">
    <DuButton type="secondary" @click="visible = true">打开弹窗</DuButton>
  </PreviewBlock>
  <DuDialog
    v-model:visible="visible"
    title="基础"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  />

  <PreviewBlock title="按钮纵向排列">
    <DuButton type="secondary" @click="commonVisible = true">打开弹窗</DuButton>
  </PreviewBlock>
  <DuDialog
    v-model:visible="commonVisible"
    @close="close"
    @confirm="handleConfirm"
    title="按钮纵向排列"
    actionLayout="vertical"
  ></DuDialog>
  <PreviewBlock title="默认插槽">
    <DuButton type="secondary" @click="commonVisible = true">打开弹窗</DuButton>
  </PreviewBlock>
  <DuDialog
    v-model:visible="commonVisible"
    @close="close"
    @confirm="handleConfirm"
    title="按钮纵向排列"
    actionLayout="vertical"
  >
    我是内容
  </DuDialog>

  <PreviewBlock title="API 模式调用">
    <DuButton type="secondary" @click="handleOpenDialog">打开弹窗</DuButton>
  </PreviewBlock>
  <DuDialog title="按钮纵向排列" ref="dialogRef" actionLayout="vertical">
    <template #footer>
      <DuButton type="outline" @click="handleCancel" full size="large">
        取消
      </DuButton>
      <DuButton type="primary" @click="handleConfirm" full size="large">
        确认
      </DuButton>
    </template>
  </DuDialog>
</template>

<script setup lang="ts">
import { DuDialog, DuButton } from 'dangoui'

const visible = ref(false)
const verticalVisible = ref(false)
const controlledVisible = ref(false)
const commonVisible = ref(false)
const actionVisible = ref(false)
const dialogRef = ref(null)

function handleCancel() {
  console.log('取消')
}
function handleConfirm() {
  commonVisible.value = false
  console.log('确认')
}

function close() {
  console.log('关闭触发')
}

function handleOpenDialog() {
  dialogRef.value.open({
    title: 'API 模式调用',
    content: '这是一个 API 模式调用的弹窗',
  })
}
</script>