Vue

AlertDialog

Introduction

The AlertDialog component is used to display simple confirmation dialogs with internationalization support and fade-in/fade-out animation effects.

Component Features:

Supports Chinese and English internationalization
Features fade-in/fade-out animation effects
Can be closed by clicking the background or button
Responsive design that adapts to different screen sizes
Supports custom dialog ID
Uses daisyUI styling for consistent design
Supports v-model two-way binding

Example

<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

Custom CSS class name for overriding default styles.

<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

Language setting that affects button text, supporting both Chinese and English languages.

<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

The message content displayed in the dialog, supporting any text content.

<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

Controls the dialog display state, supports v-model two-way binding.

<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>