收藏按钮 FavoriteBtn

用于商品卡片右上角或详情页顶部的收藏状态切换按钮（图标 15×15，内置 32×32 扩大防误触热区）。点击瞬间完成空心轮廓星与金黄色面性星切换，并带有微回弹缩放动效。

基本用法

点击星标即可切换收藏状态，支持 v-model 双向绑定。

当前状态：未收藏

<template>
  <FavoriteBtn @change="handleFavChange" v-model="isFavorited"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FavoriteBtn from '@/components/common/FavoriteBtn.vue'

const isFavorited = ref(false)
const handleFavChange = (val: boolean) => {
  console.log('收藏状态变更:', val)
}
</script>

自定义星标颜色

可通过 active-color 与 unactive-color 自定义激活与未激活色彩。

自定义红色激活态

<FavoriteBtn active-color="#FF2E38" unactive-color="#C9CCD1" v-model="isFavorited"/>

API 参数说明

参数名	说明	类型	默认值
modelValue	是否已收藏（支持 v-model）	boolean	false
activeColor	已收藏实心星填充色	string	'#F3AF00'
unactiveColor	未收藏空心星描边色	string	'#9799A2'

事件说明

事件名	说明	回调参数
update:modelValue	状态切换时触发	(val: boolean)
change	点击按钮切换收藏状态时触发	(val: boolean)