bizarre-ui

该组件库采用 Vue3@3.3.4 + TypeScript@4.7.4 + Vite4.4.7 + Less@4.1.3 实现！
所有组件样式 CSS 均使用 box-sizing: border-box; 模式！
目前共有 46 个常用基础 UI 组件，以及 10 个常用工具函数，并且持续探索更新中...！
开箱即用！

Document & Online preview

Bizarre UI

Install & Use

pnpm i bizarre-ui
# or
npm install bizarre-ui
# or
yarn add bizarre-ui

Import and register component

Global

import { createApp } from 'vue'
import App from './App.vue'

import VueAmazingUI from 'bizarre-ui'
import 'bizarre-ui/css'

const app = createApp(App)
app.use(BizarreUI)

Local

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

Project

• Get the project code

git clone https://github.com/themusecatcher/bizarre-ui.git

• Install dependencies

cd bizarre-ui

pnpm i

• Run project

pnpm dev

Components

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

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
moneyFormat	金额格式化函数！	(value: number|string, decimal = 2, split = ',') => string