Vue实现图片点赞效果

<div id="like-button-container" @click="handleClick">
  <div
    class="circle flex-h"
    :class="{ checked: isUp }"
    >
    <!-- 图片始终显示，不受 v-show 影响 -->
    <img src="@/assets/images/like.svg" alt="Like" class="like-img" />
    <!-- "+1" 文字在点赞后显示 -->
    <div class="count" v-show="isUp">+1</div>
  </div>
</div>

data(){
return{
  isUp: false
}
},
  
 methods: {
    handleClick() {
      this.isUp = !this.isUp; // 切换点赞状态
      // 可以在这里添加其他逻辑，比如发送点赞状态到服务器
    },

<style>
 /* 点赞效果 */
#like-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* 其他样式 */
}

.circle {
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: #fff;
  border: 1px solid #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 确保 "+1" 文字不会超出圆的范围 */
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 0 0 transparent; /* 初始化阴影 */
}

.circle:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 鼠标悬浮效果 */
}

.circle.checked {
  transform: scale(1.1); /* 放大效果 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 点击时的阴影效果 */
}

.like-img {
  width: 500%; /* 根据需要调整图片大小 */
  height: 70%;
  object-fit: contain; /* 确保图片在容器内完整显示 */
}

.count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #ff6347;
  white-space: nowrap; /* 防止文字换行 */
  transition: opacity 0.3s;
  opacity: 0; /* 最初不显示 */
}

.circle.checked .count {
  opacity: 1; /* 点赞后显示 */
}
</style>

  

效果图：
点赞前

点赞后