文档

Vue Amazing UI

特性

• 组件库采用 [email protected]+ [email protected] + [email protected] + [email protected] 实现
• 目前共包含 70 个基础 UI 组件以及 22 个工具函数，并且持续探索更新中...
• 主题可调，你只需提供一个主题色，剩下的都交给我
• 顺便一提，它们全都可以 treeshaking
• Vue Amazing UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接
• 全部组件均采用单文件组件 SFC，可独立使用
• 开箱即用，不墨迹

安装

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

使用组件

全局完整注册（不推荐）

失去 tree-shaking 的能力，打包后有冗余代码

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)
app.mount('#app')

全局部分注册

这种情况下，只有导入的组件才会被打包

import { createApp } from 'vue'
import App from './App.vue'
import { Button, Tag } from 'vue-amazing-ui'
// 每个组件一个样式入口（推荐写法）：内含全局默认样式 + 组件自身样式 + 其依赖组件样式
import 'vue-amazing-ui/es/button/style'
import 'vue-amazing-ui/es/tag/style'

const app = createApp(App)
app.use(Button).use(Tag)
app.mount('#app')

局部注册组件

这种情况下，也只有导入的组件才会被打包

<script setup lang="ts">
import { Button, Tag } from 'vue-amazing-ui'
// 每个组件一个样式入口（推荐写法）：内含全局默认样式 + 组件自身样式 + 其依赖组件样式
import 'vue-amazing-ui/es/button/style'
import 'vue-amazing-ui/es/tag/style'
</script>
<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

样式入口也支持（更显式的）文件写法 import 'vue-amazing-ui/es/button/style/index.js'。

自动按需引入（强烈推荐）

使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式

pnpm add unplugin-vue-components -D
# or
npm install unplugin-vue-components -D
# or
yarn add unplugin-vue-components -D
# or
bun add unplugin-vue-components -D

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
// vue-amazing-ui 按需引入
import { VueAmazingUIResolver } from 'vue-amazing-ui'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // auto import components from VueAmazingUI
        VueAmazingUIResolver({
          cjs: false // whether use commonjs build, default false
        })
      ]
    })
  ]
})

然后，你可以在代码中直接使用 vue-amazing-ui 的所有组件

<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

使用类型

所有类型均可直接从 vue-amazing-ui 中引入使用，无需任何额外安装

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from 'vue-amazing-ui'
const shape = ref<ButtonProps['shape']>('default')
</script>
<template>
  <Button :shape="shape">button</Button>
</template>

使用工具函数

<script setup lang="ts">
import {
  dateFormat,
  formatNumber,
  rafTimeout,
  cancelRaf,
  throttle,
  debounce,
  add,
  downloadFile,
  toggleDark,
  useEventListener,
  useMutationObserver,
  useScroll,
  useFps,
  useMediaQuery,
  useResizeObserver,
  useSlotsExist,
  useOptionsSupported,
  getColorPalettes,
  getAlphaColor,
  getScrollParent,
  lockScroll,
  useScrollParent
} from 'vue-amazing-ui'
</script>

项目

• 获取项目代码

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

• 安装依赖

cd vue-amazing-ui

pnpm i

• 启动项目

pnpm dev

• 启动文档

pnpm docs:dev

参与贡献

Vue Amazing UI 的每一次成长，都离不开每一位贡献者。无论是新增组件、修复缺陷，还是完善文档与示例，都欢迎参与。

提交代码前，请先阅读贡献指南。

博客

My CSDN Blogs

赞助

Vue Amazing UI 是采用 MIT 许可的开源项目，使用完全免费。组件库及文档所有工作均由作者一人完成，开发迭代过程实属不易...为了组件库的健康可持续发展，非常期望能获得您的支持与赞助。

成为赞助者

赞助者 🫡

所有的赞助者都将出现在此处，非常感谢你们的支持与赞助 ❤️

组件

| 名称 | 说明 | 名称 | 说明 | | :-------------- | :--------- | :------------- | :--------- | | Alert | 警告提示 | AutoComplete | 自动完成 | | Avatar | 头像 | BackTop | 回到顶部 | | Badge | 徽标 | Breadcrumb | 面包屑 | | Button | 按钮 | Calendar | 日历 | | Card | 卡片 | Carousel | 轮播图 | | Cascader | 级联选择 | Checkbox | 复选框 | | Collapse | 折叠面板 | ColorPicker | 颜色选择器 | | Comment | 评论 | ConfigProvider | 全局化配置 | | Countdown | 倒计时 | DatePicker | 日期选择器 | | Descriptions | 描述列表 | Dialog | 对话框 | | Divider | 分割线 | Drawer | 抽屉 | | Dropdown | 下拉菜单 | Ellipsis | 文本省略 | | Empty | 空状态 | Flex | 弹性布局 | | FloatButton | 浮动按钮 | GradientText | 渐变文字 | | Grid | 栅格 | Highlight | 高亮文本 | | 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 | 水印 |

工具函数

| 名称 | 说明 | 类型 | | :-- | :-- | :-- | | 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) => { id: number } | | cancelRaf | 用于取消 rafTimeout 函数 | (raf: { id: number }) => void | | throttle | 节流函数 | (fn: Function, delay: number = 300) => Function | | debounce | 防抖函数 | (fn: Function, delay: number = 300) => Function | | add | 消除 js 加减精度问题的加法函数 | (num1: number, num2: number) => number | | downloadFile | 下载文件并自定义文件名，内置同源 anchor 与跨域 iframe 双下载策略，未传 fileName 时，从文件地址中自动提取文件名称 | (url: string, fileName?: string, options?: { target?: '_self' | '_blank'; strategy?: 'auto' | 'anchor' | 'iframe' }) => Promise<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 = {}) => { start: () => void, stop: () => void } | | useScroll | 实时监测目标元素滚动位置及状态 | (target?: Ref | HTMLElement | Window | Document, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => { x: Ref<number>, xScrollMax: Ref<number>, y: Ref<number>, yScrollMax: Ref<number>, isScrolling: Ref<boolean>, left: Ref<boolean>, right: Ref<boolean>, top: Ref<boolean>, bottom: Ref<boolean> } | | useFps | 实时监测浏览器刷新率FPS | () => { fps: Ref<number> } | | useMediaQuery | 使用媒体查询来判断当前环境是否符合指定的媒体查询条件 | (mediaQuery: string) => { match: Ref<boolean> } | | useResizeObserver | 使用 ResizeObserver 观察 DOM 元素尺寸变化 | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: ResizeObserverCallback, options: object = {}) => { start: () => void, stop: () => void } | | useSlotsExist | 监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在 | <T extends string | string[] = 'default'>(slotsName: T) => T extends string ? ComputedRef<boolean> : Reactive<Record<string, ComputedRef<boolean>>> | | useOptionsSupported | 检查浏览器是否支持给定的事件监听器选项 | (option: 'capture' | 'once' | 'passive' | 'signal') => { isSupported: Ref<boolean> } | | getColorPalettes | 根据主色生成颜色调色板函数 | (primaryColor: string) => string[] | | getAlphaColor | 获取透明度颜色函数，一般用作阴影色 | (frontColor: string, backgroundColor: string = '#ffffff') => string | | getScrollParent | 向上查找元素最近的可滚动父元素函数 | (el: HTMLElement | null) => HTMLElement | null | | lockScroll | 锁定页面滚动并补偿滚动条宽度，防止页面横向抖动函数 | () => () => void | | useScrollParent | 查询并监听最近可滚动父元素，响应视口 resize 的组合式函数 | (contentRef: Ref<HTMLElement | null>, onScroll: () => void, options: ScrollParentOptions = {}) => { scrollTarget: Ref<HTMLElement | null>, viewportWidth: Ref<number>, viewportHeight: Ref<number>, observeScroll: () => void, cleanup: () => void } |