更新记录

1.0.0（2025-12-07） 下载此版本

appx-fav 是基于 uni-app X 开发的通用收藏组件，支持图标 / 文本自定义、选中状态切换、禁用状态控制等功能，适配多端渲染，可快速集成到各类需要收藏功能的业务场景中（如商品收藏、内容收藏等）。

平台兼容性

uni-app x(4.87)

appx-fav 收藏组件帮助文档

组件介绍

appx-fav 是基于 uni-app X 开发的通用收藏组件，支持图标/文本自定义、选中状态切换、禁用状态控制等功能，适配多端渲染，可快速集成到各类需要收藏功能的业务场景中（如商品收藏、内容收藏等）。

组件特性

1. 支持图标与文本的样式、内容、颜色自定义；
2. 双向绑定选中状态，兼容 v-model 语法；
3. 支持禁用状态设置，禁用时不可点击且样式置灰；
4. 样式解析兼容对象/字符串格式，适配不同传参场景；
5. 内置过渡动画，交互体验更流畅；
6. 适配布尔值的字符串/布尔类型传参，兼容性强。

基本使用

安装与引入

将组件文件（含template/script/style）放入项目 components/appx-fav 目录下，在需要使用的页面/组件中直接引用：

<template>
  <appx-fav v-model="isFav" />
</template>

<script lang="uts" setup>
const isFav = ref(false);
</script>

基础示例（带文本）

<appx-fav 
  v-model="isFav" 
  showText 
  normalText="收藏" 
  activeText="已收藏"
/>

属性（Props）说明

事件说明

高级用法

1. 自定义字体图标（如iconfont）

<appx-fav 
  v-model="isFav"
  normalIcon="&#xe600;" 
  activeIcon="&#xe601;"
  iconFontFamily="iconfont"
  iconSize="32rpx"
/>

注：需先在项目中引入iconfont字体库样式。

2. 自定义样式（对象/字符串格式）

<!-- 对象格式 -->
<appx-fav 
  v-model="isFav"
  showText
  containerStyle="{ padding: '8px 16px', borderRadius: '20px', background: '#f5f5f5' }"
  iconStyle="{ marginRight: '6px' }"
  textStyle="{ fontWeight: 'bold' }"
/>

<!-- 字符串格式（兼容JSON） -->
<appx-fav 
  v-model="isFav"
  containerStyle="'padding: 8px 16px; border-radius: 20px; background: #f5f5f5'"
/>

3. 禁用状态

<appx-fav 
  v-model="isFav"
  showText
  disabled="true"
/>

4. 监听状态变更

<template>
  <appx-fav 
    v-model="isFav"
    showText
    @change="handleFavChange"
  />
</template>

<script lang="uts" setup>
const isFav = ref(false);

const handleFavChange = (value) => {
  console.log('收藏状态变更：', value ? '已收藏' : '取消收藏');
  // 可在此处调用收藏/取消收藏的接口
};
</script>

注意事项

1. 样式字符串解析：若传入的样式字符串格式不规范（如缺少引号、语法错误），会自动降级为空样式，并在控制台输出警告；
2. 布尔值传参：组件兼容字符串类型的布尔值（如"false"会解析为false，"true"/其他字符串解析为true）；
3. 单位适配：数字类型的尺寸参数会自动补全px，如需rpx需手动传入字符串（如"32rpx"）；
4. 多端适配：组件基于uni-app X的uts语法开发，需确保项目环境支持uts组件编译。