Vue3 + TypeScript + Vite + Less 开发的常用基础 UI 组件库!如果好用,记得来个 ⭐️⭐️ 哦 🫶🫶🫶
[email protected]
+ [email protected]
+ [email protected]
+ [email protected]
*
63
UI
16
...*
SFC
*
box-sizing: border-box;
*npm install vue-amazing-ui
# or
pnpm add vue-amazing-ui
# or
yarn add vue-amazing-ui
# or
bun add vue-amazing-ui
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>
<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>
<script src="https://unpkg.com/vue-amazing-ui@latest"></script>
git clone https://github.com/themusecatcher/vue-amazing-ui.git
cd vue-amazing-ui
pnpm i
pnpm dev
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 |
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> |