r-util-js/packages/uview-plus

@r-utils/uview-plus

在项目已使用 uview-plus 的前提下，提供适用于 uview-plus 组件的组合式 API Hooks。

适用范围

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

不适用范围

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

安装

pnpm add @r-utils/uview-plus

导入方式

推荐：根入口导入

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

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

兼容：子路径导入

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

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

使用示例

单列选择器

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

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

picker.showPicker();

子路径导入

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

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

注意事项

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