mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<template>
|
|
<TItemBox v-model="box" @click="showData" />
|
|
</template>
|
|
<script lang="ts" setup>
|
|
// vue
|
|
import { onMounted, ref } from "vue";
|
|
import TItemBox from "../main/t-itembox.vue";
|
|
// types
|
|
import type { TItemBoxData } from "../main/t-itembox.vue";
|
|
|
|
interface TibUrAvatarProps {
|
|
modelValue: TGApp.Sqlite.Record.Avatar;
|
|
}
|
|
|
|
const props = defineProps<TibUrAvatarProps>();
|
|
const box = ref<TItemBoxData>(<TItemBoxData>{});
|
|
const getName = (): string => {
|
|
return props.modelValue.id === 10000005
|
|
? "旅行者-空"
|
|
: props.modelValue.id === 10000007
|
|
? "旅行者-荧"
|
|
: props.modelValue.name;
|
|
};
|
|
|
|
onMounted(async () => {
|
|
box.value = {
|
|
size: "80px",
|
|
height: "80px",
|
|
ltSize: "30px",
|
|
clickable: false,
|
|
bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
|
|
icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
|
|
lt: `/icon/element/${props.modelValue.element}元素.webp`,
|
|
rt: props.modelValue.constellation.toString() || "0",
|
|
rtSize: "20px",
|
|
innerText: `${getName()}`,
|
|
innerHeight: 20,
|
|
display: "inner",
|
|
};
|
|
});
|
|
|
|
function showData(): void {
|
|
// todo @click 应该出来的是一个弹窗，而不是 console
|
|
console.log(props.modelValue);
|
|
}
|
|
</script>
|