@sunyard-szyy-ui/hooks

Composition API Hooks - Vue 3 组合式 API 工具集

📦 安装

# 推荐使用主包
npm install sunyard-szyy-ui

# 或者单独安装
npm install @sunyard-szyy-ui/hooks

🎣 Hooks 列表

useNamespace

BEM 命名空间工具，用于生成标准的 CSS 类名。

特性：

• ✅ 支持 BEM 命名规范
• ✅ 自动添加前缀（默认 sy-）
• ✅ 类型安全

使用示例：

import { useNamespace } from '@sunyard-szyy-ui/hooks';

const ns = useNamespace('button');

// Block
ns.b(); // 'sy-button'

// Element
ns.e('icon'); // 'sy-button__icon'

// Modifier
ns.m('primary'); // 'sy-button--primary'

// Block + Modifier
ns.bm('large'); // 'sy-button sy-button--large'

// Element + Modifier
ns.em('icon', 'disabled'); // 'sy-button__icon sy-button__icon--disabled'

// 状态
ns.is('active'); // 'is-active'
ns.is('disabled', true); // 'is-disabled'

useDebounce

防抖 Hook，用于防抖响应式值。

特性：

• ✅ 响应式防抖
• ✅ 自动清理定时器
• ✅ 支持自定义延迟

使用示例：

import { ref } from 'vue';
import { useDebounce } from '@sunyard-szyy-ui/hooks';

const input = ref('');
const debouncedInput = useDebounce(input, 500);

// input 变化后，debouncedInput 会在 500ms 后更新
watch(debouncedInput, value => {
  console.log('防抖后的值:', value);
});

🎯 使用方式

方式一：从主包导入（推荐）

import { useNamespace, useDebounce } from 'sunyard-szyy-ui';

方式二：从 Hooks 包导入

import { useNamespace, useDebounce } from '@sunyard-szyy-ui/hooks';

方式三：直接从文件导入

import { useNamespace } from '@sunyard-szyy-ui/hooks/use-namespace';

📖 完整 API

| Hook | 说明 | 参数 | 返回值 | | -------------- | ------------ | ------------------------------ | ---------------- | | useNamespace | BEM 命名工具 | block: string | 命名空间方法对象 | | useDebounce | 防抖值 | value: Ref<T>, delay: number | Ref<T> |

🔧 开发

# 安装依赖
pnpm install

# 类型检查
pnpm typecheck

# 构建
pnpm build

# 清理构建产物
pnpm clean

📦 构建产物

@sunyard-szyy-ui/hooks/
└── dist/
    ├── index.js        # ESM 格式
    ├── index.cjs       # CJS 格式
    ├── index.d.ts      # TypeScript 类型定义
    └── index.d.cts     # CJS 类型定义

🤝 依赖

• @sunyard-szyy-ui/utils - 工具函数
• vue (peer) - Vue 3 框架

📝 注意事项

1. Vue 3 专用：所有 Hooks 基于 Vue 3 Composition API
2. 自动清理：Hooks 会在组件卸载时自动清理副作用
3. 类型安全：完整的 TypeScript 类型支持
4. Tree-shaking：支持按需导入，减少打包体积

💡 最佳实践

1. 在 setup 中使用

export default defineComponent({
  setup() {
    const ns = useNamespace('my-component');
    const debouncedValue = useDebounce(inputValue, 300);

    return { ns, debouncedValue };
  }
});

2. 结合响应式 API

const input = ref('');
const debouncedInput = useDebounce(input, 500);

watchEffect(() => {
  // 在这里使用防抖后的值
  console.log(debouncedInput.value);
});

3. 组合多个 Hooks

const ns = useNamespace('form');