r-util-js/packages/uview-plus/README.md

# @r-utils/uview-plus

在项目已使用 [uview-plus](https://uview-plus.jiangruyi.com/) 的前提下，提供适用于 uview-plus 组件的组合式 API Hooks。

## 适用范围

- 适用于已接入 `uview-plus` 的项目。
- 典型场景是 uni-app + Vue3 + uview-plus。

## 不适用范围

- 未使用 `uview-plus` 的项目不建议使用。
- 不适用于 Vue2 项目。

## 安装

```bash
pnpm add @r-utils/uview-plus
```

## 导入方式

### 推荐：根入口导入

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

```ts
import {
  usePickerSingle,
  usePicker,
  useDateTimePicker,
  useCalendar,
} from "@r-utils/uview-plus";
```

### 兼容：子路径导入

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

```ts
import { usePickerSingle } from "@r-utils/uview-plus/picker-single";
import { usePicker } from "@r-utils/uview-plus/picker";
import { useDateTimePicker } from "@r-utils/uview-plus/datetime-picker";
import { useCalendar } from "@r-utils/uview-plus/calendar";
```

## 导出模块

| 子路径 | 说明 |
| --- | --- |
| `@r-utils/uview-plus/picker-single` | 单列 picker Hook |
| `@r-utils/uview-plus/picker` | 多列 picker Hook |
| `@r-utils/uview-plus/datetime-picker` | 时间选择器 Hook |
| `@r-utils/uview-plus/calendar` | 日历选择器 Hook |

## 使用示例

### 单列选择器

```ts
import { usePickerSingle } from "@r-utils/uview-plus";

const picker = usePickerSingle({
  list: [
    { text: "启用", value: 1 },
    { text: "禁用", value: 0 },
  ],
});

picker.showPicker();
```

### 子路径导入

```ts
import { usePicker } from "@r-utils/uview-plus/picker";

const picker = usePicker({
  columns: [[{ text: "浙江", value: "zhejiang" }]],
});
```

## 注意事项

- 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
- 本包依赖 Vue3 和 uview-plus，请确保业务项目已安装并正确配置。