Animal Components

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

特性

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

安装

``bash
npm install animal-components
`

快速开始

$3

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

export function createApp() {
const app = createSSRApp(App)

// 注册组件库
app.use(AnimalComponents)

return {
app
}
}
`

$3

`vue



`

组件文档

$3

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

#### Props

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

#### Events

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

#### 示例

`vue

`

$3

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

#### Props

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

#### Events

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

#### 示例

`vue



`

$3

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

#### 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 |

#### 示例

`vue



`

开发

`bash


安装依赖

npm install

开发模式

npm run dev

构建

npm run build

预览

npm run preview
`

发布

`bash


构建项目

npm run build

发布到 npm

npm publish
`

注意事项

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

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

$3

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