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

<template>
    <Dialog :show-header="false" v-model="show" :left="left" :top="top" :right="right" padding="0" :z="999">
        <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 { Dialog } from "@/components"
import { usePopoverMenu } 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 right = ref('');

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

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

defineExpose({
    open: (idx, e) => {
        if (state.mobile) {
            right.value = '10px';
            top.value = e.pageY + 10 + 'px';
            show.value = true;
        } else {
            open(idx, e);
        }
    }
})

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

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

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

    span {
        margin-left: 0.8rem;
        line-height: 2.5rem;
    }
}

.btns {
    justify-self: center;
}

@media only screen and (max-width: 768px) {
    .tip {
        margin-bottom: 1rem;
        font-size: 1rem;

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

        span {
            margin-left: 0.5rem;
            line-height: 2rem;
        }
    }
}
</style>