@mtn-ui/utils

MTN UI 工具函数包，基于 VueUse 构建。

安装

pnpm add @mtn-ui/utils @vueuse/core

目录结构

packages/utils/src/
├── common.ts        # 通用工具函数
├── function.ts      # 函数工具（防抖、节流）
├── state.ts         # 状态管理工具
├── dom.ts           # DOM 操作工具
├── interaction.ts   # 交互工具（鼠标、滚动等）
├── media.ts         # 媒体查询工具
├── types.ts         # 类型定义
└── index.ts         # 主入口（重新导出所有内容）

功能分类

通用工具 (common.ts)

• classNames - 格式化类名

函数工具 (function.ts)

• useDebounceFn - 防抖函数
• useThrottleFn - 节流函数

状态管理 (state.ts)

本包重新导出了 VueUse 的状态管理函数，包括：

• useToggle - 切换布尔值
• useCounter - 计数器
• useLocalStorage - 本地存储
• useSessionStorage - 会话存储

DOM 操作 (dom.ts)

• onClickOutside - 点击外部区域
• useEventListener - 事件监听
• useElementSize - 元素尺寸
• useResizeObserver - 尺寸观察
• useFocus - 焦点管理
• useHover - 悬停状态
• useClipboard - 剪贴板操作

交互工具 (interaction.ts)

• useMouse - 鼠标位置
• useScroll - 滚动位置
• useWindowSize - 窗口尺寸

媒体查询 (media.ts)

• useMediaQuery - 媒体查询
• usePreferredDark - 系统暗色偏好
• useDark - 暗色模式
• useColorMode - 颜色模式

使用方式

全量导入（推荐）

import { classNames, useDebounceFn, useToggle } from '@mtn-ui/utils'

按分类导入

// 通用工具
import { classNames } from '@mtn-ui/utils/common'

// 函数工具
import { useDebounceFn, useThrottleFn } from '@mtn-ui/utils/function'

// 状态管理
import { useToggle, useCounter } from '@mtn-ui/utils/state'

// DOM 操作
import { onClickOutside, useElementSize } from '@mtn-ui/utils/dom'

// 交互工具
import { useMouse, useScroll } from '@mtn-ui/utils/interaction'

// 媒体查询
import { useDark, useColorMode } from '@mtn-ui/utils/media'

使用示例

防抖和节流

import { useDebounceFn, useThrottleFn } from '@mtn-ui/utils'

// 防抖
const debouncedSearch = useDebounceFn((query: string) => {
  console.log('Search:', query)
}, 300)

// 节流
const throttledScroll = useThrottleFn(() => {
  console.log('Scrolled')
}, 100)

状态管理

import { useToggle, useCounter, useLocalStorage } from '@mtn-ui/utils'

// 切换状态
const [isOpen, toggle] = useToggle(false)

// 计数器
const { count, inc, dec, reset } = useCounter(0)

// 本地存储
const stored = useLocalStorage('key', 'default-value')

DOM 操作

import { onClickOutside, useElementSize } from '@mtn-ui/utils'
import { ref } from 'vue'

const target = ref<HTMLElement>()

// 点击外部区域
onClickOutside(target, () => {
  console.log('Clicked outside')
})

// 元素尺寸
const { width, height } = useElementSize(target)

更多文档

查看 VueUse 官方文档 了解更多功能。