Vue

ConfirmDialog

Introduction

The ConfirmDialog component is used to display confirmation dialogs with title, message content, and two buttons (confirm and cancel). It supports custom button text and features fade-in/fade-out animation effects.

Component Features:

Displays confirmation dialogs with customizable title and message
Supports custom button text for confirm and cancel actions
Features fade-in/fade-out animation effects
Can be closed by clicking the background or cancel button
Responsive design that adapts to different screen sizes
Supports v-model two-way binding
Emits events for user interactions

Example

<script setup lang="ts">
import { ref } from 'vue';
import { ConfirmDialog } from '@coffic/cosy-ui/vue';

const showDialog = ref(false);

const handleConfirm = () => {
    alert('用户确认了操作！');
};
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <button
            style="background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer;"
            @click="showDialog = true">
            显示确认对话框
        </button>

        <ConfirmDialog v-model="showDialog" title="确认操作" message="您确定要执行此操作吗？此操作无法撤销。" @confirm="handleConfirm" />
    </div>
</template>

Props

cancelText

Text displayed on the cancel button.

<script setup lang="ts">
import { ref } from 'vue';
import { ConfirmDialog } from '@coffic/cosy-ui/vue';

const showDialog = ref(false);

const handleDelete = () => {
    alert('项目已被删除！');
};
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <button
            style="background-color: #ef4444; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer;"
            @click="showDialog = true">
            删除项目
        </button>

        <ConfirmDialog v-model="showDialog" title="删除确认" message="您确定要删除此项目吗？此操作无法撤销。" cancel-text="保留"
            confirm-text="删除" @confirm="handleDelete" />
    </div>
</template>

confirmText

Text displayed on the confirm button.

<script setup lang="ts">
import { ref } from 'vue';
import { ConfirmDialog } from '@coffic/cosy-ui/vue';

const showDialog = ref(false);

const handleDelete = () => {
    alert('项目已被删除！');
};
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <button
            style="background-color: #ef4444; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer;"
            @click="showDialog = true">
            删除项目
        </button>

        <ConfirmDialog v-model="showDialog" title="删除确认" message="您确定要删除此项目吗？此操作无法撤销。" cancel-text="保留"
            confirm-text="删除" @confirm="handleDelete" />
    </div>
</template>

message

The message content displayed in the dialog.

<script setup lang="ts">
import { ref } from 'vue';
import { ConfirmDialog } from '@coffic/cosy-ui/vue';

const showDialog = ref(false);

const handleConfirm = () => {
    alert('用户确认了操作！');
};
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <button
            style="background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer;"
            @click="showDialog = true">
            显示确认对话框
        </button>

        <ConfirmDialog v-model="showDialog" title="确认操作" message="您确定要执行此操作吗？此操作无法撤销。" @confirm="handleConfirm" />
    </div>
</template>

modelValue

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

<script setup lang="ts">
import { ref } from 'vue';
import { ConfirmDialog } from '@coffic/cosy-ui/vue';

const showDialog = ref(false);

const handleConfirm = () => {
    alert('用户确认了操作！');
};
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <button
            style="background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer;"
            @click="showDialog = true">
            显示确认对话框
        </button>

        <ConfirmDialog v-model="showDialog" title="确认操作" message="您确定要执行此操作吗？此操作无法撤销。" @confirm="handleConfirm" />
    </div>
</template>

title

The title displayed at the top of the dialog.

<script setup lang="ts">
import { ref } from 'vue';
import { ConfirmDialog } from '@coffic/cosy-ui/vue';

const showDialog = ref(false);

const handleConfirm = () => {
    alert('用户确认了操作！');
};
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <button
            style="background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer;"
            @click="showDialog = true">
            显示确认对话框
        </button>

        <ConfirmDialog v-model="showDialog" title="确认操作" message="您确定要执行此操作吗？此操作无法撤销。" @confirm="handleConfirm" />
    </div>
</template>