87 lines
2.0 KiB
Markdown
87 lines
2.0 KiB
Markdown
# @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，请确保业务项目已安装并正确配置。
|