93 lines
2.0 KiB
Markdown
93 lines
2.0 KiB
Markdown
# @r-utils/vue3
|
||
|
||
仅用于 Vue3 项目的工具包，提供 class 处理、组件事件派发和常用组合式 Hooks。
|
||
|
||
## 适用范围
|
||
|
||
- 适用于 Vue3 项目。
|
||
- 适用于需要复用 Vue3 class 处理、列表加载、表单输入值处理等能力的项目。
|
||
|
||
## 不适用范围
|
||
|
||
- 不适用于 Vue2 项目。
|
||
- 如果是 uni-app 专用能力，建议优先使用 `@r-utils/uni-app`。
|
||
|
||
## 安装
|
||
|
||
```bash
|
||
pnpm add @r-utils/vue3
|
||
```
|
||
|
||
## 导入方式
|
||
|
||
### 推荐：根入口导入
|
||
|
||
大多数场景推荐从根入口导入，路径简单，使用心智负担更低。
|
||
|
||
```ts
|
||
import {
|
||
mergeClass,
|
||
dispatch,
|
||
useLoadMore,
|
||
useTimer,
|
||
useValueOfRule,
|
||
} from "@r-utils/vue3";
|
||
```
|
||
|
||
### 兼容：子路径导入
|
||
|
||
如果你希望模块边界更清晰，也可以使用子路径导入。两种方式都支持。
|
||
|
||
```ts
|
||
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
|
||
|
||
```ts
|
||
import { mergeClass } from "@r-utils/vue3";
|
||
|
||
const cls = mergeClass("btn", ["btn-primary"], { active: true });
|
||
```
|
||
|
||
### 列表加载
|
||
|
||
```ts
|
||
import { useLoadMore } from "@r-utils/vue3";
|
||
|
||
const listState = useLoadMore(async (pageNum, pageSize) => {
|
||
return {
|
||
total: 100,
|
||
list: await fetchList(pageNum, pageSize),
|
||
};
|
||
});
|
||
|
||
await listState.loadMore();
|
||
```
|
||
|
||
### 子路径导入 Hook
|
||
|
||
```ts
|
||
import { useTimer } from "@r-utils/vue3/hooks/utils";
|
||
|
||
const timer = useTimer(60);
|
||
timer.start();
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
- 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
|
||
- 本包依赖 Vue3，请确保业务项目已安装兼容版本的 `vue`。
|