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

<template>
    <teleport to="#app">
        <div class="dialog" v-show="show" @contextmenu.prevent="console.log('禁用浏览器默认右键功能')">
            <div class="title" v-if="showHeader">
                <span>{{ title }}</span>
                <i class="close" @click="show = false; emit('close')"></i>
            </div>
            <slot />
        </div>
    </teleport>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { watch, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";

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

const emit = defineEmits(['update:modelValue', 'close'])
const prop = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    showHeader: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        defalut: ""
    },
    top: {
        type: String,
        default: ''
    },
    left: {
        type: String,
        default: ''
    },
    right: {
        type: String,
        default: ''
    },
    bottom: {
        type: String,
        default: ''
    },
    padding: {
        type: String,
        default: '0'
    },
})
watch(show, (n, o) => {
    emit('update:modelValue', n);
})
watch(() => prop.modelValue, (n, o) => {
    show.value = n;
})

onMounted(() => {
    document.addEventListener('keydown', (e) => {
        if (e.keyCode == 27) {
            show.value = false;
        }
    })
});
</script>
<style lang="scss" scoped>
.dialog {
    top: v-bind('prop.top');
    left: v-bind('prop.left');
    right: v-bind('prop.right');
    bottom: v-bind('prop.bottom');
    padding: v-bind('prop.padding');
    position: absolute;
    z-index: 9;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.7);

}

.title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    height: 3.5rem;
    line-height: 3.5rem;
    width: 100%;
    color: white;
    border-bottom: 1px solid #fff;

    .close {
        cursor: pointer;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        display: block;
        width: 2rem;
        height: 2rem;
        background-image: url(@/assets/icons/close.png);
        background-size: cover;
    }
}
</style>