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

@r-utils/uview-plus

基于 uview-plus 的 Vue3 组合式 API 工具 Hooks，适用于 uni-app 项目。

安装

pnpm add @r-utils/uview-plus

使用

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	'请选择'	占位文本

返回值：

{
  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	' '	多列值拼接分隔符

返回值：

{
  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	'请选择'	占位文本

返回值：

{
  value, show, text,
  showCalendar, hideCalendar, handleConfirm, handleClose
}

类型声明

包内置了 UViewPlus namespace 类型声明，无需额外引入。

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