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
|