一个 Vue 3 组件库
主题可调，明暗双主题，全量使用 TypeScript 和 SFC，支持 tree shaking
有点意思
English | 中文
## 文档 [Vue Amazing UI](https://themusecatcher.github.io/vue-amazing-ui/) ## 特性 - 目前共包含 `73` 个基础 `UI` 组件以及 `16` 个工具函数，并且持续探索更新中... - 主题可调，你只需提供一个主题色，剩下的都交给我 - 支持明暗双主题，可手动切换，也可跟随系统主题自动切换 - 顺便一提，它们全都可以 `treeshaking` - `Vue Amazing UI` 全量使用 `TypeScript` 编写，和你的 `TypeScript` 项目无缝衔接 - 全部组件均为单文件组件 `SFC`，可直接使用源码 - 支持服务端渲染 - 开箱即用，不墨迹 ## 安装 ```sh pnpm add vue-amazing-ui # or npm install vue-amazing-ui # or yarn add vue-amazing-ui # or bun add vue-amazing-ui ``` ## 使用组件 **全局完整注册（不推荐）** _失去 `tree-shaking` 的能力，打包后有冗余代码_ ```ts import { createApp } from 'vue' import App from './App.vue' import VueAmazingUI from 'vue-amazing-ui' import 'vue-amazing-ui/css' const app = createApp(App) app.use(VueAmazingUI) app.mount('#app') ``` **全局部分注册** _这种情况下，只有导入的组件才会被打包_ ```ts import { createApp } from 'vue' import App from './App.vue' import { Button, Tag } from 'vue-amazing-ui' // 每个组件一个样式入口（推荐写法）：内含全局默认样式 + 组件自身样式 + 其依赖组件样式 import 'vue-amazing-ui/es/button/style' import 'vue-amazing-ui/es/tag/style' const app = createApp(App) app.use(Button).use(Tag) app.mount('#app') ``` **局部注册组件** _这种情况下，也只有导入的组件才会被打包_ ```vue
## 组件
| 名称 | 说明 | 名称 | 说明 | 名称 | 说明 |
| :-------------- | :--------- | :-------------- | :--------- | :-------------- | :--------- |
| Alert | 警告提示 | AutoComplete | 自动完成 | Avatar | 头像 |
| BackTop | 回到顶部 | Badge | 徽标 | Breadcrumb | 面包屑 |
| Button | 按钮 | Calendar | 日历 | Card | 卡片 |
| Carousel | 轮播图 | Cascader | 级联选择 | Checkbox | 复选框 |
| Collapse | 折叠面板 | ColorPicker | 颜色选择器 | Comment | 评论 |
| ConfigProvider | 全局化配置 | Countdown | 倒计时 | DatePicker | 日期选择器 |
| Descriptions | 描述列表 | Dialog | 对话框 | Divider | 分割线 |
| Drawer | 抽屉 | Dropdown | 下拉菜单 | Ellipsis | 文本省略 |
| Empty | 空状态 | Flex | 弹性布局 | FloatButton | 浮动按钮 |
| GradientText | 渐变文字 | Grid | 栅格 | Highlight | 高亮文本 |
| Image | 图片 | Input | 输入框 | InputNumber | 数字输入框 |
| InputSearch | 搜索框 | Layout | 布局 | List | 列表 |
| LoadingBar | 加载条 | Menu | 导航菜单 | Message | 全局提示 |
| Modal | 模态框 | Notification | 通知提醒 | NumberAnimation | 数值动画 |
| Pagination | 分页 | Popconfirm | 弹出确认 | Popover | 气泡卡片 |
| Progress | 进度条 | QRCode | 二维码 | Radio | 单选框 |
| Rate | 评分 | Result | 结果 | Scrollbar | 滚动条 |
| Segmented | 分段控制器 | Select | 选择器 | Skeleton | 骨架屏 |
| Slider | 滑动输入条 | Space | 间距 | Spin | 加载中 |
| Statistic | 统计数值 | Steps | 步骤条 | Swiper | 触摸滑动 |
| Switch | 开关 | Table | 表格 | Tabs | 标签页 |
| Tag | 标签 | Textarea | 文本域 | TextScroll | 文字滚动 |
| Timeline | 时间轴 | TimePicker | 时间选择器 | Tooltip | 文字提示 |
| Upload | 上传 | Video | 播放器 | Waterfall | 瀑布流 |
| Watermark | 水印 | | | | |
## 工具函数
| 名称 | 说明 | 类型 |
| :-- | :-- | :-- |
| dateFormat | 格式化日期时间字符串函数 | (value: number | string | Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string |
| formatNumber | 数字格式化函数 | (value: number | string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string |
| throttle | 节流函数 | (fn: Function, delay: number = 300) => Function |
| debounce | 防抖函数 | (fn: Function, delay: number = 300) => Function |
| add | 消除 `js` 加减精度问题的加法函数 | (num1: number, num2: number) => number |
| downloadFile | 下载文件并自定义文件名，内置同源 `anchor` 与跨域 `iframe` 双下载策略，未传 `fileName` 时，从文件地址中自动提取文件名称 | (url: string, fileName?: string, options?: { target?: '_self' | '_blank'; strategy?: 'auto' | 'anchor' | 'iframe' }) => Promise<void> |
| useEventListener | 使用 `Vue` 的生命周期钩子添加和移除事件监听器 | (target: HTMLElement | Window | Document, event: string, callback: Function) => void |
| useMutationObserver | 使用 `MutationObserver` 观察 `DOM` 元素的变化 | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: MutationCallback, options: object = {}) => { start: \() => void, stop: \() => void } |
| useScroll | 实时监测滚动位置、方向与边界状态 | (target?: MaybeRefOrGetter\