You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.6 KiB
50 lines
1.6 KiB
<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> |