更新记录

1.0.0（2025-08-13）

first commit

平台兼容性

uni-app x(4.66)

xudy-like-button

xudy-like-button 点赞组件

介绍

xudy-like-button 是一个支持动画效果的点赞组件，用户可以通过点击心形图标来切换点赞状态。组件支持横向和纵向布局，可以显示点赞计数，并提供流畅的动画反馈。

属性

事件

使用示例

<template>
  <view>
    <!-- 基础用法 -->
    <xudy-like-button :liked="isLiked" :count="likeCount" @change="handleLikeChange"></xudy-like-button>

    <!-- 横向布局 -->
    <xudy-like-button :liked="isLiked" :count="likeCount" :isRow="true" @change="handleLikeChange"></xudy-like-button>

    <!-- 自定义大小 -->
    <xudy-like-button :liked="isLiked" :count="likeCount" :size="36" @change="handleLikeChange"></xudy-like-button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isLiked = ref(false);
const likeCount = ref(42);

const handleLikeChange = (event: UTSJSONObject) => {
  isLiked.value = event.liked;
  likeCount.value = event.count;
  console.log('点赞状态:', event.liked);
  console.log('点赞数:', event.count);
};
</script>

功能特性

• 支持点击切换点赞状态
• 实心红心和空心心形图标切换显示
• 点击时带动画效果
• 支持横向和纵向布局
• 可显示或隐藏点赞计数
• 可自定义图标大小
• 支持禁用状态

一个轻量级的点赞组件，支持点击切换状态、动画效果和计数显示。

功能特性

• 👍 支持点赞/取消点赞状态切换
• ✨ 点击点赞时有弹性缩放动画效果
• 🔢 支持显示/隐藏点赞计数
• ↔️ 可切换横向/纵向布局
• 🚫 支持禁用状态
• 📡 提供状态变化事件回调

安装与使用

安装依赖

确保已安装 uni-icons 组件：

npm install @dcloudio/uni-ui

```vue
<template>
  <xudy-like-button 
    :liked="isLiked" 
    :count="likeCount" 
    @change="handleLikeChange" 
  />
</template>

<script setup>

const isLiked = ref(false);
const likeCount = ref(0);

const handleLikeChange = ({ liked, count }) => {
  console.log('点赞状态变化:', liked, '点赞数:', count);
};
</script>

组件属性 属性名 类型 默认值 说明 liked Boolean false 初始点赞状态 isRow Boolean false 是否横向布局 isShowCount Boolean true 是否显示点赞计数 count Number 0 初始点赞数量 disabled Boolean false 是否禁用点击 组件事件 事件名 回调参数 说明 change { liked: Boolean, count: Number } 点赞状态变化时触发 样式定制 组件提供了以下 CSS 类供自定义样式：

.like-container - 点赞容器

.like-icon - 心形图标

.like-count - 点赞计数

.liked - 已点赞状态

.animate - 动画状态

可以通过覆盖这些类来定制组件样式。

浏览器/平台兼容性 支持所有 UniApp 平台（H5、小程序、App）

依赖 CSS 动画特性，在低版本浏览器中动画效果可能降级

开发注意事项 确保项目中已正确引入 uni-icons 组件

动画效果依赖 CSS 的 transform 属性

组件宽度在非横向布局时固定为 54rpx

点击事件会冒泡，必要时使用 .stop 修饰符

许可证 MIT