Vue
ConfirmDialog
简介
ConfirmDialog 组件用于显示确认对话框，带有标题、消息内容和两个按钮（确认和取消），支持自定义按钮文本，并带有淡入淡出动画效果。
组件特性：
- 显示带有可自定义标题和消息的确认对话框
- 支持自定义确认和取消操作的按钮文本
- 具有淡入淡出动画效果
- 可通过点击背景或取消按钮关闭
- 响应式设计，适配不同屏幕尺寸
- 支持 v-model 双向绑定
- 发出用户交互事件
案例
<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
取消按钮上显示的文本。
<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
确认按钮上显示的文本。
<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
对话框中显示的消息内容。
<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
控制对话框显示状态，支持 v-model 双向绑定。
<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
对话框顶部显示的标题。
<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>
Emits
update:modelValue
当对话框关闭时触发，用于更新 v-model 绑定值。
confirm
当用户点击确认按钮时触发。