@my-antd-ui/components

My Antd UI 是一个基于 Vue 3 和 TypeScript 开发的高性能组件库。它不仅提供了常用的基础组件，还包含了高性能的虚拟列表等高级组件。

✨ 特性

• 🚀 高性能: 包含针对大数据量优化的虚拟列表组件。
• 📦 轻量级: 按需引入，减少包体积。
• 📝 TypeScript 支持: 提供完整的类型定义文件。
• 🎨 样式灵活: 使用 BEM 命名规范，方便自定义主题。

📦 安装

pnpm add @my-antd-ui/components @my-antd-ui/theme @my-antd-ui/utils

🔨 包含组件

基础组件 (General)

• Button: 提供多种类型（primary, success, danger 等）和禁用状态的按钮。
• Icon: 基于 Ant Design Icons 的图标组件，支持自定义大小、颜色和插槽。
• Input: 支持 v-model 双向绑定、占位符及清空功能。

布局组件 (Layout)

• Row & Col: 基于 24 栅格系统，支持 gutter 间隔、offset 偏移、响应式布局（xs, sm, md, lg, xl）及多种对齐方式（justify, align）。

反馈组件 (Feedback)

• Message: 全局提示函数，支持 success, info, warning, error 四种类型。

高级组件 (Advanced)

• VirtualList: 虚拟列表组件，支持固定高度和动态高度，极大优化了万级以上数据的渲染性能。

🚀 快速上手

1. 引入样式

在项目入口文件（如 main.ts）中引入基础样式：

import '@my-antd-ui/theme/index.css'

2. 使用组件

<script setup lang="ts">
import { MyButton, MyInput, message } from '@my-antd-ui/components'
import { ref } from 'vue'

const val = ref('')
const handleClick = () => {
  message.success('操作成功！')
}
</script>

<template>
  <MyInput v-model="val" placeholder="请输入..." />
  <MyButton type="primary" @click="handleClick">提交</MyButton>
</template>

📖 组件 API 概览

VirtualList (虚拟列表)

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | data | 数据源 | any[] | [] | | itemHeight | 固定高度 (px) | number | 50 | | estimatedItemHeight | 动态高度预估值 (px) | number | 50 | | height | 容器高度 | number | string | '100%' |

Layout (Row/Col)

• Row: gutter (间隔), justify (水平对齐), align (垂直对齐)
• Col: span (占据列数), offset (偏移量), xs/sm/md/lg/xl (响应式配置)

更多详细文档请参考项目的 VitePress 文档。