Vue
AlertDialog
简介
AlertDialog 组件用于显示简单的确认对话框，支持国际化，带有淡入淡出动画效果。
组件特性：
- 支持中英文国际化
- 带有淡入淡出动画效果
- 点击背景或按钮可关闭
- 响应式设计，适配不同屏幕尺寸
- 支持自定义对话框 ID
- 使用 daisyUI 样式，与整体设计风格一致
- 支持 v-model 双向绑定
案例
<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';
const showDialog = ref(false);
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
显示对话框
</button>
<AlertDialog v-model="showDialog" message="这是一条重要信息" />
</div>
</template>
Props
class
自定义 CSS 类名，用于覆盖默认样式。
<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';
const showDialog = ref(false);
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
显示自定义样式对话框
</button>
<AlertDialog v-model="showDialog" message="这是一个带有自定义样式的确认对话框"
class="cosy:bg-primary cosy:text-primary-content" />
</div>
</template>
lang
语言设置，影响按钮文本，支持中文和英文两种语言。
<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';
const showDialog = ref(false);
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
Show English Dialog
</button>
<AlertDialog v-model="showDialog" message="This is an English confirmation dialog example" lang="en" />
</div>
</template>
message
对话框显示的消息内容，支持任意文本内容。
<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';
const showDialog = ref(false);
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
显示对话框
</button>
<AlertDialog v-model="showDialog" message="这是一条重要信息" />
</div>
</template>
modelValue
控制对话框显示状态，支持 v-model 双向绑定。
<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';
const showDialog = ref(false);
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
显示对话框
</button>
<AlertDialog v-model="showDialog" message="这是一条重要信息" />
</div>
</template>
Emits
update:modelValue
当对话框关闭时触发，用于更新 v-model 绑定值。
Slots
default
无插槽内容，所有内容通过 message 属性传递。