Vue Composables

Composables 工具函数

Composables 提供常用工具函数。这里展示防抖、复制、分页、表单、本地存储与通知。

导入方式

vue

import { useDebounce, useLocalStorage, useMediaQuery, useClickOutside, useCopyToClipboard, useToggle, usePagination, useForm, toast } from '@ug666/ui-vue'

useDebounce

对输入值进行防抖处理。

搜索关键词

输入后等待 500ms 更新结果

实时输入：button
防抖结果：button

vue

const keyword = ref('')
const debouncedKeyword = useDebounce(keyword, 500)

useLocalStorage + useMediaQuery

持久化偏好设置，并感知屏幕断点。

深色模式偏好

localStorage 当前值：light
桌面断点是否命中：否

vue

const [theme, setTheme] = useLocalStorage('docs-theme', 'light')

vue

const isDesktop = useMediaQuery('(min-width: 1024px)')

useClickOutside + useCopyToClipboard

常用于关闭弹层或复制业务链接。

点击此区域外部后，下方状态会变为“已触发”。

外部点击状态：等待点击外部

https://ui.ug666.top/vue

vue

const panelRef = useClickOutside<HTMLDivElement>(() => {
  isOpen.value = false
})

vue

const { copied, copy } = useCopyToClipboard()
await copy('https://ui.ug666.top/vue')

useToggle + usePagination

适合控制可见性状态与列表分页逻辑。

面板状态：已展开

…

当前第 2 页，共 9 页，偏移量 10

vue

const { value, toggle, setOn, setOff } = useToggle(false)

vue

const { page, totalPages, offset, setPage } = usePagination({ total: 87, pageSize: 10 })

useForm

管理字段值、错误信息与重置逻辑。

姓名

邮箱

角色

备注

这里可以继续组合其他表单组件。

当前表单值：{"name":"","email":"","role":"designer"}
错误信息：{}

vue

const form = useForm({ name: '', email: '', role: 'designer' })

toast / useToast

统一处理全局成功、错误与信息通知。

等待触发通知

vue

toast.success('保存成功')
toast.error('发布失败')
toast.info('已进入预览模式')