点赞

package.json

@@ -46,7 +46,8 @@
     "vite-plugin-imagemin": "^0.6.1",
     "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vue3-lottie": "^2.7.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.35.3",

src/components/common/LikeBtn.vue

@@ -1,5 +1,16 @@
 <template>
-    <div class="flex items-center" @click.stop="like()">
+    <div class="flex items-center relative" @click.stop="like()">
+        <div class="absolute bottom-0 left-[-20px]">
+            <Vue3Lottie
+                ref="likeRef"
+                :animationData="likeJSON"
+                v-if="showLike"
+                @onComplete="showLike = false"
+                :loop="false"
+                :height="100"
+                :width="60"
+            />
+        </div>
         <img class="w-[24px] animate__animated" ref="imgRef" :src="liked ? likePreImg : likeImg" alt="" />
         <span class="text-[#797A8A] text-xs" :class="{ 'text-[#FF3F71]': liked }">
             <slot></slot>
@@ -12,6 +23,9 @@ import '@/styles/animate.css'
 import { ref } from 'vue'
 import likePreImg from '@/assets/icon_dianzhan-pre.png'
 import likeImg from '@/assets/icon_dianzhan.png'
+import { Vue3Lottie } from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
+import likeJSON from '@/assets/lottie/like.json'
 
 const props = defineProps({
     liked: {
@@ -25,6 +39,7 @@ interface Emit {
 }
 const emit = defineEmits<Emit>()
 const imgRef = ref(null as any)
+const showLike = ref(false)
 
 function like() {
     if (imgRef.value) {
@@ -33,6 +48,9 @@ function like() {
             imgRef.value.className = imgRef.value.className.replace(/ animate__tada/, '')
         }, 800)
     }
+    if (!props.liked) {
+        showLike.value = true
+    }
     emit('like')
 }
 </script>

yarn.lock

@@ -5499,6 +5499,11 @@ longest@^1.0.0:
   resolved "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz"
   integrity sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==
 
+lottie-web@5.11.0:
+  version "5.11.0"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.11.0.tgz#04bb9fd6cdfbb10e586985dd666de6c727619d95"
+  integrity sha512-9vSt0AtdOH98GKDXwD5LPfFg9Pcmxt5+1BllAbudKM5iqPxpJnJUfuGaP45OyudDrESCOBgsjnntVUTygBNlzw==
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz"
@@ -7923,6 +7928,14 @@ vue-tsc@^1.2.0:
     "@volar/vue-language-core" "1.2.0"
     "@volar/vue-typescript" "1.2.0"
 
+vue3-lottie@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/vue3-lottie/-/vue3-lottie-2.7.0.tgz#b9f591bb1990eca762a6195f5d49259dac57f7e2"
+  integrity sha512-6vblrGFQxRP1bqd5Lfg+/g/kDH7OL5dQMxU9xYORSsTC7NfHXOjebhYrIYOlRodtA5/zfWMkG+3+sIR7wjaIXw==
+  dependencies:
+    lodash-es "^4.17.21"
+    lottie-web "5.11.0"
+
 vue@^3.2.47:
   version "3.2.47"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz"