更新记录

1.0.0（2025-08-13）

first commit

平台兼容性

uni-app x(4.66)

xudy-collect-button 收藏按钮组件

介绍

xudy-collect-button 是一个支持动画效果的收藏按钮组件，用户点击可切换收藏状态，并带动画反馈。组件支持横向布局、收藏计数显示等功能。

属性

事件

使用示例

<template>
  <view>
    <xudy-collect-button 
      :collected="isCollected" 
      :count="collectCount" 
      :isRow="true" 
      :size="36"
      @change="handleCollectChange">
    </xudy-collect-button>
  </view>
</template>

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

const isCollected = ref(false);
const collectCount = ref(0);

const handleCollectChange = (event: UTSJSONObject) => {
  isCollected.value = event.collected;
  collectCount.value = event.count;
  console.log('收藏状态:', event.collected, '收藏数量:', event.count);
};
</script>

功能特性

1. 状态切换：点击按钮可在收藏和未收藏状态间切换
2. 动画反馈：状态切换时带有缩放动画效果
3. 计数显示：可显示当前收藏数量
4. 灵活布局：支持横向和纵向布局
5. 尺寸自定义：可自定义图标大小
6. 禁用状态：支持禁用点击操作