110 lines
2.7 KiB
Markdown
110 lines
2.7 KiB
Markdown
# @r-utils/uview-plus
|
||
|
||
基于 [uview-plus](https://uview-plus.jiangruyi.com/) 的 Vue3 组合式 API 工具 Hooks，适用于 uni-app 项目。
|
||
|
||
## 安装
|
||
|
||
```bash
|
||
pnpm add @r-utils/uview-plus
|
||
```
|
||
|
||
## 使用
|
||
|
||
```ts
|
||
import { usePickerSingle, usePicker, useCalendar } from '@r-utils/uview-plus'
|
||
```
|
||
|
||
## API
|
||
|
||
### `usePickerSingle(options)`
|
||
|
||
单列 Picker 封装。
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| `value` | `unknown \| Ref<unknown>` | `null` | 选中的值 |
|
||
| `show` | `boolean \| Ref<boolean>` | `false` | 是否显示 |
|
||
| `indexes` | `Array<number \| null> \| Ref<...>` | `[null]` | 选中的索引 |
|
||
| `list` | `PickerColumns[0] \| Ref<...>` | `[]` | 列数据 |
|
||
| `textName` | `string` | `'text'` | 显示字段名 |
|
||
| `valueName` | `string` | `'value'` | 值字段名 |
|
||
| `placeholder` | `string` | `'请选择'` | 占位文本 |
|
||
|
||
**返回值：**
|
||
|
||
```ts
|
||
{
|
||
value, show, indexes, columns, text, defaultIndex,
|
||
showPicker, hidePicker, handleConfirm, handleClose
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### `usePicker(options)`
|
||
|
||
多列 Picker 封装。
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| `value` | `unknown[] \| Ref<unknown[]>` | `[]` | 选中的值数组 |
|
||
| `show` | `boolean \| Ref<boolean>` | `false` | 是否显示 |
|
||
| `indexes` | `Array<number \| null> \| Ref<...>` | `[]` | 选中的索引数组 |
|
||
| `columns` | `PickerColumns \| Ref<PickerColumns>` | `[]` | 列数据 |
|
||
| `textName` | `string` | `'text'` | 显示字段名 |
|
||
| `valueName` | `string` | `'value'` | 值字段名 |
|
||
| `placeholder` | `string` | `'请选择'` | 占位文本 |
|
||
| `separator` | `string` | `' '` | 多列值拼接分隔符 |
|
||
|
||
**返回值：**
|
||
|
||
```ts
|
||
{
|
||
value, show, indexes, columns, text, defaultIndex,
|
||
showPicker, hidePicker, handleConfirm, handleClose
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### `useCalendar(options)`
|
||
|
||
日历选择封装。
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| `value` | `string \| string[] \| Ref<...>` | `null` | 选中的日期 |
|
||
| `show` | `boolean \| Ref<boolean>` | `false` | 是否显示 |
|
||
| `mode` | `'single' \| 'multiple' \| 'range' \| Ref<...>` | `'single'` | 日历模式 |
|
||
| `placeholder` | `string` | `'请选择'` | 占位文本 |
|
||
|
||
**返回值：**
|
||
|
||
```ts
|
||
{
|
||
value, show, text,
|
||
showCalendar, hideCalendar, handleConfirm, handleClose
|
||
}
|
||
```
|
||
|
||
## 类型声明
|
||
|
||
包内置了 `UViewPlus` namespace 类型声明，无需额外引入。
|
||
|
||
```ts
|
||
declare namespace UViewPlus {
|
||
type PickerColumns = any[][];
|
||
type PickerValue<T extends PickerColumns = PickerColumns> = T[number][number][];
|
||
type PickerConfirmEvent<T extends PickerColumns = PickerColumns> = {
|
||
indexs: number[];
|
||
value: PickerValue<T>;
|
||
values: T;
|
||
};
|
||
type CalendarConfirmEvent = string[];
|
||
}
|
||
```
|
||
|
||
## 许可证
|
||
|
||
ISC
|