Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-12 09:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 修复特定情况下的UI溢出

Browse Source
This commit is contained in:
目棃
2024-08-29 16:35:43 +08:00
parent 726a890fde
commit 01e6a87d4b
1 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/gachaRecord/gro-overview.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="gro-o-container">
<gro-dataview v-if="newData.length !== 0" v-model:data-val="newData" data-type="new" />
<gro-dataview v-model:data-val="normalData" data-type="normal" />
<gro-dataview v-model:data-val="avatarData" data-type="avatar" />
<gro-dataview v-model:data-val="weaponData" data-type="weapon" />
<gro-dataview v-if="mixData.length !== 0" v-model:data-val="mixData" data-type="mix" />
<gro-dataview v-if="newData.length !== 0" :data-val="newData" data-type="new" />
<gro-dataview :data-val="normalData" data-type="normal" />
<gro-dataview :data-val="avatarData" data-type="avatar" />
<gro-dataview :data-val="weaponData" data-type="weapon" />
<gro-dataview v-if="mixData.length !== 0" :data-val="mixData" data-type="mix" />
</div>
</template>
<script lang="ts" setup>
import { computed, watch } from "vue";
import { computed, ref, watch } from "vue";
import GroDataview from "./gro-dataview.vue";
@@ -18,32 +18,46 @@ interface GachaOverviewProps {
const props = defineProps<GachaOverviewProps>();
// data
let newData = props.modelValue.filter((item) => item.uigfType === "100");
let normalData = props.modelValue.filter((item) => item.uigfType === "200");
let avatarData = props.modelValue.filter((item) => item.uigfType === "301");
let weaponData = props.modelValue.filter((item) => item.uigfType === "302");
let mixData = props.modelValue.filter((item) => item.uigfType === "500");
const newData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
props.modelValue.filter((item) => item.uigfType === "100"),
);
const normalData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
props.modelValue.filter((item) => item.uigfType === "200"),
);
const avatarData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
props.modelValue.filter((item) => item.uigfType === "301"),
);
const weaponData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
props.modelValue.filter((item) => item.uigfType === "302"),
);
const mixData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
props.modelValue.filter((item) => item.uigfType === "500"),
);
const cnCols = computed(() => {
const cnCols = ref<string>(getCnCols());
function getCnCols(): string {
let total = 5;
if (newData.length === 0) {
if (newData.value.length === 0) {
total -= 1;
}
if (mixData.length === 0) {
if (mixData.value.length === 0) {
total -= 1;
}
return `repeat(${total}, 1fr)`;
});
if (total === 5) {
return "repeat(5, 0.2fr)";
} else if (total === 4) {
return "repeat(4, 0.25fr)";
} else {
return "repeat(3, 0.33fr)";
}
}
// 监听数据变化
watch(
() => props.modelValue,
(newVal) => {
newData = newVal.filter((item) => item.uigfType === "100");
normalData = newVal.filter((item) => item.uigfType === "200");
avatarData = newVal.filter((item) => item.uigfType === "301");
weaponData = newVal.filter((item) => item.uigfType === "302");
mixData = newVal.filter((item) => item.uigfType === "500");
() => {
cnCols.value = getCnCols();
},
);
</script>