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

💄 优化图片加载显示

Browse Source
This commit is contained in:
目棃
2024-09-02 13:45:49 +08:00
parent e7b176f9f4
commit 49a9060212
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/post/tp-image.vue
View File

@@ -1,7 +1,11 @@
<template> <template>
<div class="tp-image-box" @click="showOverlay = true"> <div class="tp-image-box" @click="showOverlay = true" v-if="localUrl !== undefined">
<img :src="localUrl" :alt="props.data.insert.image" :title="getImageTitle()" /> <img :src="localUrl" :alt="props.data.insert.image" :title="getImageTitle()" />
</div> </div>
<div v-else class="tp-image-load" :title="getImageUrl()">
<v-progress-circular indeterminate color="primary" size="small" />
<span>加载中...</span>
</div>
<TpoImage :image="props.data" v-model="showOverlay" /> <TpoImage :image="props.data" v-model="showOverlay" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -31,7 +35,7 @@ interface TpImageProps {
const props = defineProps<TpImageProps>(); const props = defineProps<TpImageProps>();
const showOverlay = ref(false); const showOverlay = ref(false);
const localUrl = ref<string>(); const localUrl = ref<string | undefined>(undefined);
console.log("tp-image", props.data.insert.image, props.data.attributes); console.log("tp-image", props.data.insert.image, props.data.attributes);
@@ -80,4 +84,12 @@ function getImageUrl(): string {
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
} }
.tp-image-load {
display: flex;
align-items: center;
justify-content: center;
margin: 10px auto;
column-gap: 5px;
}
</style> </style>