vue-amazing-ui
Vue3 + TypeScript + Vite + Less 开发的常用基础 UI 组件库！如果好用，记得来个 ⭐️⭐️ 哦 🫶🫶🫶
vue-amazing-ui
-
[email protected]+[email protected]+[email protected]+[email protected]* -
63UI16...* -
SFC* -
box-sizing: border-box;*
**
Document & Online Preview
Vue Amazing UI
Install
npm install vue-amazing-ui
# or
pnpm add vue-amazing-ui
# or
yarn add vue-amazing-ui
# or
bun add vue-amazing-ui
Use Components
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 Functions
<script setup lang="ts">
import {
dateFormat,
formatNumber,
rafTimeout,
cancelRaf,
throttle,
debounce,
add,
downloadFile,
toggleDark,
useEventListener,
useMutationObserver,
useScrollDirection,
useFps,
useMediaQuery,
useResizeObserver,
useSlotsExist
} from 'vue-amazing-ui'
</script>
Use CDN
<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
| Name | Description | Name | Description |
|---|---|---|---|
| Alert | Avatar | ||
| BackTop | Badge | ||
| Breadcrumb | Button | ||
| Card | Carousel | ||
| Cascader | Checkbox | ||
| Collapse | Countdown | ||
| DatePicker | Descriptions | ||
| Dialog | Divider | ||
| Drawer | Ellipsis | ||
| Empty | Flex | ||
| FloatButton | GradientText | ||
| Grid | Image | ||
| Input | InputNumber | ||
| InputSearch | List | ||
| LoadingBar | 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 | ||
| Tooltip | Upload | ||
| Video | Waterfall | ||
| Watermark |
Details
Functions
| Name | Description | Type |
|---|---|---|
| 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 | |
| rafTimeout |
requestAnimationFrame setTimeout setInterval
|
(fn: Function, delay: number = 0, interval: boolean = false) => object |
| cancelRaf | rafTimeout |
(raf: { id: number }) => void |
| throttle | (fn: Function, delay: number = 300) => any | |
| debounce | (fn: Function, delay: number = 300) => any | |
| add | js |
(num1: number, num2: number) => number |
| downloadFile | name |
(url: string, fileName?: string) => void |
| toggleDark | () => void | |
| useEventListener | Vue |
(target: HTMLElement | Window | Document, event: string, callback: Function) => void |
| useMutationObserver |
MutationObserver DOM
|
(target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: MutationCallback, options = {}) => object |
| useScrollDirection | (throttleDelay: number = 100) => object | |
| useFps | FPS | () => object |
| useMediaQuery | (mediaQuery: string) => object | |
| useResizeObserver |
ResizeObserver DOM
|
(target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: ResizeObserverCallback, options = {}) => object |
| useSlotsExist | (slotsName: string | string[] = 'default') => Reactive | Ref<boolean> |
Package Rankings
Top 5.23% on Npmjs.org