55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<div class="confirm">
|
|
<p v-html="content"></p>
|
|
<Teleport
|
|
defer
|
|
to=".modal-card:has(.confirm) .modal-card-foot"
|
|
>
|
|
<div class="field is-grouped">
|
|
<div class="control is-expanded">
|
|
<div class="buttons">
|
|
<button
|
|
class="button is-primary has-text-white"
|
|
@click="confirm()"
|
|
>
|
|
Đồng ý
|
|
</button>
|
|
<button
|
|
class="button is-white"
|
|
@click="cancel()"
|
|
>
|
|
Hủy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="control"
|
|
v-if="duration"
|
|
>
|
|
<CountDown
|
|
:duration="duration"
|
|
@close="cancel()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
const props = defineProps({
|
|
content: String,
|
|
duration: Number,
|
|
});
|
|
|
|
const emit = defineEmits(["close", "modalevent"]);
|
|
|
|
function cancel() {
|
|
emit("close");
|
|
}
|
|
|
|
function confirm() {
|
|
emit("modalevent", { name: "confirm" });
|
|
cancel();
|
|
}
|
|
</script>
|