bizarre-ui

该组件库采用 [email protected] + [email protected] + Vite4.4.7 + [email protected] 实现！ 所有组件样式 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 |