vue-idle-game/src/views/backpack/backpack.vue

<template>
    <Tooltip :infos="[t('backpack')]" width="8rem">
        <img class="menu-img" :src="menu_icons.backpack" @click="showMenu">
    </Tooltip>

    <Dialog :title="t('backpack')" v-model="show" top="4rem" left='8%' @close="state.curMenu = null">
        <Player />
        <Grid @openEquipMenu="openEquipMenu" />
    </Dialog>

    <EquipMenu ref="equipMenu" @closePack="show = false" />

</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { Tooltip, Dialog } from "@/components"
import { menu_icons } from "@/config";
import Grid from './grid.vue';
import EquipMenu from './equip-menu.vue';
import Player from './player.vue';


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

const emit = defineEmits(['openMenu'])
const show = computed(() => {
    return state.curMenu == 'backpack';
});
const equipMenu = ref();

const openEquipMenu = (idx, event) => {
    event.preventDefault();
    commit('close_equip_tip');
    equipMenu.value?.open(idx, event)
}

const showMenu = () => {
    state.curMenu = show.value ? null : 'backpack';
}
const keydown = (e) => {
    if (e.keyCode == 66 && !e.ctrlKey) {
        showMenu();
    }
}

onMounted(() => {
    showMenu();
    document.addEventListener('keydown', keydown);
});
onBeforeUnmount(() => {
    document.removeEventListener('keydown', keydown);
})
</script>
<style lang="scss" scoped></style>