用法
构建在 模态框 组件之上，DashboardModal 包含标题、主体和页脚。
它的标题与移动设备上的 DashboardNavbar 完全匹配，并且包含一个与 DashboardSlideover 和 DashboardSearch 匹配的关闭按钮。
使用 title、description 和 icon 属性来自定义模态框。
<script setup lang="ts">
const open = ref(true)
const loading = ref(false)
function onDelete() {
loading.value = true
setTimeout(() => {
loading.value = false
open.value = false
}, 1000)
}
// This is a hack to keep the modal open
watch(open, (value) => {
if (!value) {
setTimeout(() => open.value = true, 1000)
}
})
</script>
<template>
<UDashboardModal
v-model="open"
title="Delete account"
description="Are you sure you want to delete your account?"
icon="i-heroicons-exclamation-circle"
:ui="{
icon: { base: 'text-red-500 dark:text-red-400' } as any,
footer: { base: 'ml-16' } as any
}"
>
<template #footer>
<UButton color="red" label="Delete" :loading="loading" @click="onDelete" />
<UButton color="white" label="Cancel" @click="open = false" />
</template>
</UDashboardModal>
</template>
插槽
icon
{}
title
{}
description
{}
default
{}
footer
{}
header
{}
属性
icon
字符串
未定义title
字符串
未定义description
字符串
未定义closeButton
按钮
{}ui
任何
{}modelValue
布尔值
falsepreventClose
布尔值
false配置
{
rounded: 'sm:rounded-lg',
shadow: 'sm:shadow-xl',
width: 'sm:max-w-xl',
height: 'h-dvh sm:h-auto',
padding: 'p-0',
header: {
base: 'flex items-start justify-between gap-x-1.5 flex-shrink-0 min-h-[--header-height]',
inner: 'flex items-start gap-4',
padding: 'px-4 py-4 sm:px-6'
},
body: {
base: 'flex-1 flex flex-col gap-y-3 overflow-y-auto',
padding: 'px-4 py-5 sm:p-6'
},
footer: {
base: 'flex items-center gap-x-1.5 flex-shrink-0',
padding: 'px-4 py-4 sm:px-6'
},
title: 'text-gray-900 dark:text-white font-semibold',
description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
icon: {
wrapper: 'inline-flex',
base: 'w-12 h-12 flex-shrink-0 text-gray-900 dark:text-white'
},
default: {
closeButton: {
icon: 'i-heroicons-x-mark-20-solid',
color: 'gray',
variant: 'ghost',
size: 'sm'
}
}
}