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`。
|