|
|
|
|
<template>
|
|
|
|
|
<Dialog :show-header="false" v-model="show" :left="left" :top="top" padding="0" :z="10">
|
|
|
|
|
<PopoverMenu :items="[
|
|
|
|
|
{ label: t('use'), onClick: useEquip },
|
|
|
|
|
{ label: t('strengthen'), onClick: strengthenEquip },
|
|
|
|
|
{ label: t('reforge'), onClick: strengthenEquip },
|
|
|
|
|
{ label: state.grid[index]?.locked ? t('unlock') : t('lock'), onClick: () => state.grid[index].locked = !state.grid[index].locked },
|
|
|
|
|
{ label: t('sell'), onClick: () => dispatch('sell_equip', index) },
|
|
|
|
|
]" />
|
|
|
|
|
</Dialog>
|
|
|
|
|
|
|
|
|
|
<Dialog :title="t('strengthen') + t('equip')" v-model="showStrengthen" top="10rem" left="2rem" padding="0" :z="11">
|
|
|
|
|
<Strengthen :equip="state.grid[index]" />
|
|
|
|
|
</Dialog>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { useStore } from "vuex";
|
|
|
|
|
import { onBeforeUnmount, onMounted, ref } from "vue";
|
|
|
|
|
import { useI18n } from "vue3-i18n";
|
|
|
|
|
import { Dialog, PopoverMenu } from "@/components"
|
|
|
|
|
import Strengthen from "./strengthen.vue";
|
|
|
|
|
import { usePopoverMenu } from "@/tool";
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n();
|
|
|
|
|
const { state, commit, dispatch } = useStore();
|
|
|
|
|
const showStrengthen = ref(false);
|
|
|
|
|
const { show, top, left, index, open, close } = usePopoverMenu();
|
|
|
|
|
const emit = defineEmits(['closePack'])
|
|
|
|
|
|
|
|
|
|
defineExpose({ open })
|
|
|
|
|
|
|
|
|
|
const useEquip = () => {
|
|
|
|
|
dispatch("useEquip", index.value);
|
|
|
|
|
}
|
|
|
|
|
const strengthenEquip = () => {
|
|
|
|
|
emit('closePack');
|
|
|
|
|
close();
|
|
|
|
|
showStrengthen.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
document.addEventListener('click', close)
|
|
|
|
|
});
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
|
document.removeEventListener('keydown', close)
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped></style>
|
