@vue3-simple-bui/platform

😄 说明

基于 Vue 3 Hooks 的业务方法集合，帮助你在多项目之间沉淀和复用通用逻辑。

✨ 特性

• 逻辑沉淀：将常见业务场景提炼为 Hooks，减少重复胶水代码。
• 类型完备：全量 TypeScript 定义，享受智能提示和类型推导。
• 性能友好：内置函数缓存、安全的 nextTick 等策略，降低资源浪费。
• 即插即用：涵盖 DOM 监听、状态重置、字典缓存等高频能力，按需引入即可。

完整文档请查看

📦 安装

pnpm install @vue3-simple-bui/platform

🚀 快速上手

import { useEventListener } from '@vue3-simple-bui/platform';

useEventListener('resize', () => {
  console.log('Window size changed');
});

🧩 方法一览

| Hook/方法 | 能力概述 | | ----------------------- | --------------------------------------------------- | | useEventListener | 组件生命周期驱动的事件监听，自动挂载/卸载 | | useFnCacheWrapper | 为函数提供 LRU 风格缓存，避免重复计算 | | useListenHeightWidth | 使用 ResizeObserver 监听 DOM 宽高并提供偏移计算 | | usePinyinAndWubi | 将汉字转换为拼音（全/简）和五笔编码 | | useResetReactiveValue | 为 reactive 状态保存快照并一键恢复默认值 | | useResetRefValue | 针对 ref 状态的轻量重置工具 | | useReuseDataByTypes | 依据 Key 缓存业务字典/下拉选项，支持强制刷新 | | secureNextTick | 在 nextTick 基础上增加安全延迟，确保 DOM 完全更新 |

📚 场景示例

缓存接口数据

import { useReuseDataByTypes } from '@vue3-simple-bui/platform';
import { getRoleList } from '@/api/common';

const { roleList } = useReuseDataByTypes({
  key: 'roleList',
  method: getRoleList,
  query: { status: 1 },
});

重置查询条件

import { useResetReactiveValue } from '@vue3-simple-bui/platform';

const DEFAULT_QUERY = { deptId: null, deptName: null };
const [query, resetQuery] = useResetReactiveValue(DEFAULT_QUERY);

// ...表单交互
resetQuery();

🛠️ 开发与发布

• 构建：pnpm run platform-build
• 产物打包：pnpm run platform-packtgz
• 私服发布：pnpm run platform-publish

📝 版本日志

发布记录

📄 License

MIT © LMX