r-util-js/packages/vue3

@r-utils/vue3

仅用于 Vue3 项目的工具包，提供 class 处理、组件事件派发和常用组合式 Hooks。

适用范围

• 适用于 Vue3 项目。
• 适用于需要复用 Vue3 class 处理、列表加载、表单输入值处理等能力的项目。

不适用范围

• 不适用于 Vue2 项目。
• 如果是 uni-app 专用能力，建议优先使用 @r-utils/uni-app。

安装

pnpm add @r-utils/vue3

导入方式

推荐：根入口导入

大多数场景推荐从根入口导入，路径简单，使用心智负担更低。

import {
  mergeClass,
  dispatch,
  useLoadMore,
  useTimer,
  useValueOfRule,
} from "@r-utils/vue3";

兼容：子路径导入

如果你希望模块边界更清晰，也可以使用子路径导入。两种方式都支持。

import { mergeClass } from "@r-utils/vue3/vue-helper";
import { useLoadMore } from "@r-utils/vue3/hooks/list";
import { useTimer, useValueOfRule } from "@r-utils/vue3/hooks/utils";

导出模块

子路径	说明
@r-utils/vue3/vue-helper	Vue class 合并、转换和祖先组件事件派发
@r-utils/vue3/hooks/list	列表分页加载 Hook
@r-utils/vue3/hooks/utils	常用组合式工具 Hook

使用示例

合并 class

import { mergeClass } from "@r-utils/vue3";

const cls = mergeClass("btn", ["btn-primary"], { active: true });

列表加载

import { useLoadMore } from "@r-utils/vue3";

const listState = useLoadMore(async (pageNum, pageSize) => {
  return {
    total: 100,
    list: await fetchList(pageNum, pageSize),
  };
});

await listState.loadMore();

子路径导入 Hook

import { useTimer } from "@r-utils/vue3/hooks/utils";

const timer = useTimer(60);
timer.start();

注意事项

• 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
• 本包依赖 Vue3，请确保业务项目已安装兼容版本的 vue。