Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-03-19 04:29:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 调整浮窗信息显示逻辑，优化自定义表情label显示判断

Browse Source
This commit is contained in:
BTMuli
2026-02-28 18:10:20 +08:00
parent 1497533f14
commit 572180234f
2 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/viewPost/tp-emoticon.vue
View File

@@ -8,9 +8,7 @@
@click="handleEmoticonClick"
@error="handleEmoticonError"
/>
<div v-if="props.data.insert.custom_emoticon.size.width > 100" class="tp-emo-info">
自定义表情
</div>
<div v-if="showLabel" class="tp-emo-info">自定义表情</div>
</div>
<div v-else :title="props.data.insert.custom_emoticon.url" class="tp-image-load">
<v-progress-circular :indeterminate="true" color="blue" size="small" />
@@ -86,6 +84,11 @@ const image = computed<TpImage>(() => ({
size: props.data.insert.custom_emoticon.size.file_size,
},
}));
const showLabel = computed<boolean>(() => {
if (props.data.insert.custom_emoticon.size.width > 100) return true;
if (!emoticonEl.value) return false;
return emoticonEl.value.clientWidth > 100;
});
console.log("tp-emoticon", props.data.insert.custom_emoticon);

17
src/components/viewPost/vp-overlay-image.vue
View File

@@ -30,7 +30,10 @@
<span>大小：</span>
<span>{{ bytesToSize(props.image.attributes.size ?? 0) }}</span>
</span>
<span class="tpoi-info-item">
<span
v-if="props.image.attributes?.width && props.image.attributes?.height"
class="tpoi-info-item"
>
<span>尺寸：</span>
<span>{{ props.image.attributes.width }}x{{ props.image.attributes.height }}</span>
</span>
@@ -41,19 +44,19 @@
</div>
</template>
<div class="tpoi-tools">
<v-icon @click="setBlackBg" title="切换背景色" v-if="showOri">
<v-icon v-if="showOri" title="切换背景色" @click="setBlackBg">
mdi-format-color-fill
</v-icon>
<v-icon @click="showOri = true" title="查看原图" v-else>mdi-magnify</v-icon>
<v-icon @click="onCopy" title="复制到剪贴板" v-if="showCopy">mdi-content-copy</v-icon>
<v-icon @click="onDownload" title="下载到本地">mdi-download</v-icon>
<v-icon @click="visible = false" title="关闭浮窗">mdi-close</v-icon>
<v-icon v-else title="查看原图" @click="showOri = true">mdi-magnify</v-icon>
<v-icon v-if="showCopy" title="复制到剪贴板" @click="onCopy">mdi-content-copy</v-icon>
<v-icon title="下载到本地" @click="onDownload">mdi-download</v-icon>
<v-icon title="关闭浮窗" @click="visible = false">mdi-close</v-icon>
</div>
</div>
</div>
</TOverlay>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import TOverlay from "@comp/app/t-overlay.vue";
import showLoading from "@comp/func/loading.js";
import showSnackbar from "@comp/func/snackbar.js";