39 lines
1.2 KiB
Vue
39 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
message: { type: String, required: true },
|
|
callback: { type: Function, required: true },
|
|
})
|
|
|
|
const handleConfirm = (result: boolean) => {
|
|
props.callback(result);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex fixed inset-0 z-[1000] flex items-center justify-center p-4 bg-black/50 !bg-opacity-10!">
|
|
<div class="flex bg-white rounded-2xl shadow-xl max-w-sm w-full p-6 flex-col gap-5">
|
|
<!-- Сообщение -->
|
|
<div class="flex text-center mb-6">
|
|
<span class="text-lg font-semibold text-gray-900">
|
|
{{ message }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Кнопки -->
|
|
<div class="flex gap-3">
|
|
<button
|
|
@click="handleConfirm(false)"
|
|
class="flex-1 py-3 px-4 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 active:bg-gray-100 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
@click="handleConfirm(true)"
|
|
class="flex-1 py-3 px-4 bg-blue-500 text-white rounded-xl font-medium hover:bg-blue-600 active:bg-blue-700 transition-colors"
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |