Animal Components

一个专为 uniapp 设计的 Vue 3 组件库，内置 uniapp API 支持。

特性

• 🚀 专为 uniapp 环境设计
• 📱 支持 H5、小程序、App 多端
• 🎨 现代化 UI 设计
• 📦 开箱即用
• 🔧 TypeScript 支持
• 📖 完整的文档和示例

安装

npm install animal-components

快速开始

全局注册

// main.js
import { createSSRApp } from 'vue'
import AnimalComponents from 'animal-components'

export function createApp() {
  const app = createSSRApp(App)
  
  // 注册组件库
  app.use(AnimalComponents)
  
  return {
    app
  }
}

按需引入

<template>
  <view>
    <MyButton text="点击我" @click="handleClick" />
    <ImageUploader @success="handleUploadSuccess" />
    <DataList :api-url="apiUrl" @item-click="handleItemClick" />
  </view>
</template>

<script setup>
import { MyButton, ImageUploader, DataList } from 'animal-components'

const handleClick = () => {
  console.log('按钮被点击了')
}

const handleUploadSuccess = (data) => {
  console.log('上传成功:', data)
}

const handleItemClick = ({ item, index }) => {
  console.log('列表项被点击:', item, index)
}
</script>

组件文档

MyButton 按钮组件

一个功能丰富的按钮组件，支持多种样式和尺寸。

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | text | string | '点击我' | 按钮文字 | | type | 'primary' | 'success' | 'warning' | 'error' | 'primary' | 按钮类型 | | size | 'small' | 'medium' | 'large' | 'medium' | 按钮尺寸 | | disabled | boolean | false | 是否禁用 |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | click | 点击事件 | - |

示例

<template>
  <view>
    <!-- 基础用法 -->
    <MyButton text="点击我" @click="handleClick" />
    
    <!-- 不同类型 -->
    <MyButton text="成功" type="success" />
    <MyButton text="警告" type="warning" />
    <MyButton text="错误" type="error" />
    
    <!-- 不同尺寸 -->
    <MyButton text="小按钮" size="small" />
    <MyButton text="大按钮" size="large" />
    
    <!-- 禁用状态 -->
    <MyButton text="禁用按钮" disabled />
  </view>
</template>

ImageUploader 图片上传组件

支持选择、预览、删除图片的上传组件。

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | maxCount | number | 1 | 最大选择图片数量 | | sizeType | string[] | ['original', 'compressed'] | 图片尺寸类型 | | sourceType | string[] | ['album', 'camera'] | 图片来源类型 | | quality | number | 80 | 图片质量 |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | success | 上传成功 | { url: string, tempFilePath: string } | | fail | 上传失败 | error | | delete | 删除图片 | - |

示例

<template>
  <view>
    <ImageUploader 
      :max-count="3"
      :quality="90"
      @success="handleUploadSuccess"
      @fail="handleUploadFail"
      @delete="handleDelete"
    />
  </view>
</template>

<script setup>
const handleUploadSuccess = (data) => {
  console.log('上传成功:', data.url)
}

const handleUploadFail = (error) => {
  console.error('上传失败:', error)
}

const handleDelete = () => {
  console.log('图片已删除')
}
</script>

DataList 数据列表组件

支持分页加载的数据列表组件。

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | '' | 列表标题 | | apiUrl | string | - | 数据接口地址 | | pageSize | number | 10 | 每页数据量 | | autoLoad | boolean | true | 是否自动加载数据 |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | itemClick | 列表项点击 | { item: any, index: number } | | loadSuccess | 加载成功 | { data: any[], page: number, total: number } | | loadError | 加载失败 | error |

示例

<template>
  <view>
    <DataList 
      title="商品列表"
      api-url="https://api.example.com/products"
      :page-size="20"
      @item-click="handleItemClick"
      @load-success="handleLoadSuccess"
    >
      <template #default="{ item, index }">
        <view class="product-item">
          <text>{{ item.name }}</text>
          <text class="price">¥{{ item.price }}</text>
        </view>
      </template>
    </DataList>
  </view>
</template>

<script setup>
const handleItemClick = ({ item, index }) => {
  console.log('点击了商品:', item)
}

const handleLoadSuccess = ({ data, page, total }) => {
  console.log(`第${page}页加载成功，共${total}条数据`)
}
</script>

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 预览
npm run preview

发布

# 构建项目
npm run build

# 发布到 npm
npm publish

注意事项

1. 此组件库专为 uniapp 环境设计，需要在 uniapp 项目中使用
2. 组件内部使用了 uniapp 的 API（如 uni.chooseImage、uni.request 等）
3. 确保你的 uniapp 项目已正确配置相关权限（如相机、相册权限）

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

v1.0.7

• 新增 MyButton 按钮组件
• 新增 ImageUploader 图片上传组件
• 新增 DataList 数据列表组件
• 支持 TypeScript
• 优化构建配置