44c34d043d
- 新增点赞动画效果，使用CSS动画实现点赞时的缩放效果 - 替换点赞图标为红色版本，并在点赞时显示动画 - 在评论列表和详情页统一使用新的点赞图标 - 添加Like组件用于显示点赞动画 - 优化代码结构，调整部分样式和布局
42 lines
12 KiB
Vue
42 lines
12 KiB
Vue
<template>
|
||
<img class="like" :src="imageUrl" alt="" />
|
||
</template>
|
||
<script setup>
|
||
const base64 = `data:image/gif;base64,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`;
|
||
|
||
const imageUrl = ref("");
|
||
let objectUrl = "";
|
||
|
||
onMounted(() => {
|
||
// 1. 移除data协议前缀，提取纯Base64编码
|
||
const pureBase64 = base64.replace("data:image/gif;base64,", "");
|
||
|
||
// 2. 将Base64转换为Blob（二进制对象）
|
||
const byteCharacters = atob(pureBase64);
|
||
const byteNumbers = new Uint8Array(byteCharacters.length);
|
||
for (let i = 0; i < byteCharacters.length; i++) {
|
||
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||
}
|
||
const blob = new Blob([byteNumbers], { type: "image/gif" });
|
||
|
||
// 3. 生成临时URL（每次生成的URL都不同，触发重新加载）
|
||
objectUrl = URL.createObjectURL(blob);
|
||
imageUrl.value = objectUrl;
|
||
});
|
||
|
||
// 组件卸载时释放临时URL，避免内存泄漏
|
||
onUnmounted(() => {
|
||
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
||
});
|
||
</script>
|
||
<style scoped>
|
||
.like {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
</style>
|