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

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

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

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

const emit = defineEmits(['update:modelValue', 'close'])
const prop = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    showHeader: {
        type: Boolean,
        default: true
    },
    obscured: {
        type: Boolean,
        default: false
    },
    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'
    },
    z: {
        type: Number,
        default: 9
    }
})
watch(show, (n, o) => {
    emit('update:modelValue', n);
    if (!n) {
        commit('close_equip_tip');
    }
})
watch(() => prop.modelValue, (n, o) => {
    show.value = n;
})

onMounted(() => {
    document.addEventListener('keydown', (e) => {
        if (e.keyCode == 27) {
            show.value = false;
        }
    })
    if (prop.obscured) {
        style.value = {
            height: '100%'
        }
    } else {
        style.value = {};
    }
});
</script>
<style lang="scss" scoped>
.dialog {
    position: absolute;
    width: 100%;
    z-index: v-bind('z');
    background: rgba(0, 0, 0, 0.5);

    .content {
        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;
        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-size: cover;
}
</style>