快速上手

赞助

介绍

vue-amazing-ui 内置 16 个可独立使用的工具函数，覆盖日期数字格式化、节流防抖、文件下载、DOM 观察与滚动定位等场景。全部按需具名导出、tree shaking 友好，功能丰富，简单易用！

分类索引

• 格式化与精度：dateFormat · formatNumber · add
• 定时与交互：throttle · debounce
• 文件下载：downloadFile
• DOM 与能力：useEventListener · useMutationObserver · useResizeObserver · useMediaQuery · useFps · useSlotsExist · useOptionsSupported
• 滚动与定位：useScroll · useScrollParent · getScrollParent

取色请用组件库的主题派生：ConfigProvider 的 theme.seed 会生成全部语义变量，derive(seed, mode) 可直接在 JS / canvas / SVG 场景取同一份结果，无需自行拼装色板与透明度色。

使用

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

说明

下表为对外公开的 16 个工具函数；组件库内部工具未从主入口导出、不承诺稳定性，故不在此列出。

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
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>
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?: MaybeRefOrGetter<HTMLElement | Window | Document | null>, options?: UseScrollOptions) => { x: Ref<number>, y: Ref<number>, maxX: Ref<number>, maxY: Ref<number>, isScrolling: Ref<boolean>, direction: Ref<'left' | 'right' | 'top' | 'bottom' | null>, atLeft: Ref<boolean>, atRight: Ref<boolean>, atTop: Ref<boolean>, atBottom: Ref<boolean>, refresh: () => void, start: () => void, stop: () => void }
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> }
getScrollParent	向上查找元素最近的可滚动父元素函数	(el: HTMLElement | null) => HTMLElement | null
useScrollParent	查询并监听最近可滚动父元素，响应视口 resize 的组合式函数	(contentRef: Ref<HTMLElement | null>, onScroll: () => void, options: ScrollParentOptions = {}) => { scrollTarget: Ref<HTMLElement | null>, viewportWidth: Ref<number>, viewportHeight: Ref<number>, observeScroll: () => void, cleanup: () => void }