vue-idle-game/src/components/confirm.vue

<template>
    <Dialog :show-header="false" v-model="show" :left="left" :top="top" padding="0">
        <div class="confirm">
            <div class='tip'>
                <img :src="warning_icon">
                <span>{{ tip }}</span>
            </div>
            <div class="btns">
                <button class="button" @click="show = false; emit('confirm')">{{ confirm }}</button>
                <button class="button" @click="show = false; emit('cancel')">{{ cancel }}</button>
            </div>
        </div>
    </Dialog>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { Tooltip, EquipTip, EquipIcon, Dialog, PopoverMenu } from "@/components"
import { usePopoverMenu, conisOfBuy } from "@/tool";
import { warning_icon } from "@/config";


const { t } = useI18n();
const { state, commit, dispatch } = useStore();

const menu = usePopoverMenu();
const { show, top, left, open } = menu;

const emit = defineEmits(['confirm', 'cancel'])

defineProps({
    tip: {
        type: String,
        default: ''
    },
    confirm: {
        type: String,
        default: ''
    },
    cancel: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: ''
    }
})

defineExpose({ open })

onMounted(() => { });
</script>
<style lang="scss" scoped>
.confirm {
    padding: 1rem;
    width: v-bind('width');
}

.tip {
    display: flex;
    color: white;
    margin-bottom: 2rem;
    font-size: 1.5rem;

    img {
        width: 2.5rem;
        height: 2.5rem;
    }

    span {
        margin-left: 0.8rem;
        // height: 2.5rem;
        width: v-bind('width');
        line-height: 2.5rem;
    }
}

.btns {
    justify-self: center;
}
</style>