vue-amazing-ui

该组件库采用 Vue@3.3.12+ TypeScript@5.3.3 + Vite@5.0.10 + Less@4.2.0 实现！
所有组件样式 CSS 均使用 box-sizing: border-box; 模式！
目前共有 54 个常用基础 UI 组件，以及 11 个常用工具函数，并且持续探索更新中...！
开箱即用！

Document & Online preview

Vue Amazing UI

Install & Use

pnpm i vue-amazing-ui
# or
npm install vue-amazing-ui
# or
yarn add vue-amazing-ui

Import and register component

Global

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)

Local

<script setup lang="ts">
import { Button } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'
</script>

Use CDN in Project

<script src="https://unpkg.com/vue-amazing-ui@latest"></script>

Project

Get the project code

git clone https://github.com/themusecatcher/vue-amazing-ui.git

Install dependencies

cd vue-amazing-ui

pnpm i

Run project

pnpm dev

Components

Component name	Descriptions	Component name	Descriptions
Alert	警告提示	Avatar	头像
BackTop	回到顶部	Badge	徽标数
Breadcrumb	面包屑	Button	按钮
Card	卡片	Carousel	走马灯
Cascader	级联选择	Checkbox	多选框
Collapse	折叠面板	Countdown	倒计时
DatePicker	日期选择	Descriptions	描述列表
Dialog	对话框	Divider	分割线
Drawer	抽屉	Ellipsis	文本省略
Empty	空状态	Flex	弹性布局
Grid	栅格	Image	图片
Input	输入框	InputNumber	数字输入框
Message	全局提示	Modal	信息提示
Notification	通知提醒	NumberAnimation	数值动画
Pagination	分页	Popconfirm	气泡确认框
Progress	进度条	QRCode	二维码
Radio	单选框	Rate	评分
Result	结果	Select	选择器
Slider	滑动输入条	Space	间距
Spin	加载中	Statistic	统计数值
Steps	步骤条	Swiper	触摸滑动插件
Switch	开关	Table	表格
Tabs	标签页	Tag	标签
Textarea	文本域	TextScroll	文字滚动
Timeline	时间轴	Tooltip	文字提示
Upload	上传	Video	播放器
Waterfall	瀑布流	Watermark	水印

Details

My CSDN Blogs

Functions

Function name	Descriptions	Arguments
dateFormat	简单易用的日期格式化函数！	(timestamp: number \| string \| Date, format = 'YYYY-MM-DD HH:mm:ss') => string
requestAnimationFrame	针对不同浏览器进行兼容处理！	使用方式不变
cancelAnimationFrame	针对不同浏览器进行兼容处理！	使用方式不变
rafTimeout	使用 requestAnimationFrame 实现的定时器函数，等效替代 (setTimeout 和 setInterval)！	(func: Function, delay = 0, interval = false) => object
cancelRaf	用于取消 rafTimeout 函数！	(raf: { id: number }) => void
throttle	使用 rafTimeout 实现的节流函数！	(fn: Function, delay = 300) => any
debounce	使用 rafTimeout 实现的防抖函数！	(fn: Function, delay = 300) => any
add	消除js加减精度问题的加法函数！	(num1: number, num2: number) => number
downloadFile	下载文件并自定义文件名！	(url: string, name: string) => void
formatNumber	数字格式化函数！	(value: number \| string, precision = 2, separator = ',', decimal = '.', prefix = '', suffix = '') => string
toggleDark	一键切换暗黑模式函数！	() => void

jiannei/vue-amazing-ui