From a5b9a3051d708b7e61b86144971e61efa05cd1eb Mon Sep 17 00:00:00 2001 From: zhujiruo Date: Mon, 9 Jun 2025 19:41:36 +0800 Subject: [PATCH] =?UTF-8?q?feat(picker):=20`Picker`=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=89=8B=E5=8A=A8=E6=8E=A7=E5=88=B6=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=20(#771)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 Picker 组件中添加 open 和 close 方法，用于手动控制选择器的显示和隐藏 - 更新文档和示例，展示手动控制功能的使用方法 --- packages/vantui/src/picker/README.md | 26 ++++------------ packages/vantui/src/picker/demo/demo7.tsx | 36 +++++++++++++++++++++++ packages/vantui/src/picker/demo/index.tsx | 5 ++++ packages/vantui/src/picker/index.tsx | 10 +++++-- packages/vantui/types/picker.d.ts | 8 +++++ 5 files changed, 63 insertions(+), 22 deletions(-) create mode 100644 packages/vantui/src/picker/demo/demo7.tsx diff --git a/packages/vantui/src/picker/README.md b/packages/vantui/src/picker/README.md index 3da3115b2..ee9d8c251 100644 --- a/packages/vantui/src/picker/README.md +++ b/packages/vantui/src/picker/README.md @@ -48,6 +48,10 @@ import { Picker } from '@antmjs/vantui' ::: $demo6 ::: +### 手动控制 + +::: $demo7 ::: + ### PickerProps [[详情]](https://github.com/AntmJS/vantui/tree/main/packages/vantui/types/picker.d.ts) | 参数 | 说明 | 类型 | 默认值 | 必填 | @@ -102,6 +106,8 @@ import { Picker } from '@antmjs/vantui' 通过 ref 获取到的方法如下 | 方法 | 说明 | 类型 | | --- | --- | --- | +| open | 手动打开 | _  () => void
_ | +| close | 手动关闭 | _  () => void
_ | | setColumnValues | 设置每一列的数据，异步获取到最新的 values | _  (
    index: number,
    options: string[]
  ) => Promise
_ | | getColumnValues | 获取每一列的值 | _  (
    index: number[]
  ) => any[]
_ | | setColumnValue | 设置某一列的值 | _  (
    index: number,
    value: any
  ) => any
_ | @@ -111,23 +117,3 @@ import { Picker } from '@antmjs/vantui' | setIndexes | 设置每一列展示的下标 | _  (
    indexes: number[]
  ) => void
_ | | getValues | 每一列展示的值 | _  () => any
_ | | confirm | 触发确认的方法 | _  () => void
_ | - -### 样式变量 - -组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考[ConfigProvider 组件](https://antmjs.github.io/vantui/#/config-provider) - -| 名称 | 默认值 | -| ----------------------------------- | ---------------------------- | -| --picker-background-color | ` @white;` | -| --picker-toolbar-height | ` 88px;` | -| --picker-title-font-size | ` @font-size-lg;` | -| --picker-action-padding | ` 0 @padding-md;` | -| --picker-action-font-size | ` @font-size-md;` | -| --picker-confirm-action-color | ` @text-link-color;` | -| --picker-cancel-action-color | ` @gray-6;` | -| --picker-option-font-size | ` @font-size-lg;` | -| --picker-option-text-color | ` @black;` | -| --picker-loading-icon-color | ` var(--primary-color);` | -| --picker-loading-mask-color | ` rgba(255, 255, 255, 0.9);` | -| --picker-option-disabled-opacity | ` 0.3;` | -| --picker-option-selected-text-color | ` @text-color;` | diff --git a/packages/vantui/src/picker/demo/demo7.tsx b/packages/vantui/src/picker/demo/demo7.tsx new file mode 100644 index 000000000..52eaa4857 --- /dev/null +++ b/packages/vantui/src/picker/demo/demo7.tsx @@ -0,0 +1,36 @@ +import { View } from '@tarojs/components' +import { useRef, useState } from 'react' +import { Button, IPickerInstance, Picker, PickerProps } from '@antmjs/vantui' + +const columns = ['杭州', '宁波', '温州', '嘉兴', '湖州'] +export default function Demo() { + const [value, setValue] = useState('杭州') + const pickerRef = useRef(null) + return ( + + { + setValue(e.detail) + }} + mode="content" + showToolbar + title={ + + } + columns={columns} + /> + + + ) +} diff --git a/packages/vantui/src/picker/demo/index.tsx b/packages/vantui/src/picker/demo/index.tsx index eef6188a6..12653dd43 100644 --- a/packages/vantui/src/picker/demo/index.tsx +++ b/packages/vantui/src/picker/demo/index.tsx @@ -9,6 +9,7 @@ import Demo3 from './demo3' import Demo4 from './demo4' import Demo5 from './demo5' import Demo6 from './demo6' +import Demo7 from './demo7' export default class Index extends Component { constructor(props) { @@ -41,6 +42,10 @@ export default class Index extends Component { + + + + ) } diff --git a/packages/vantui/src/picker/index.tsx b/packages/vantui/src/picker/index.tsx index ab1ff3ca0..cd4f4bfa1 100644 --- a/packages/vantui/src/picker/index.tsx +++ b/packages/vantui/src/picker/index.tsx @@ -271,6 +271,12 @@ const Picker = forwardRef(function Index( useImperativeHandle(ref, () => { return { + open: () => { + if (mode === 'content' && !disabled) { + setShow(true) + } + }, + close: () => setShow(0), setColumnValue, getColumnValue, setColumnValues, @@ -329,10 +335,10 @@ const Picker = forwardRef(function Index( }, [columns, columnsInner]) useEffect(() => { - if (valuesInner && mode === 'content' && show) { + if (mode === 'content' && show) { setTimeout(() => { onShow?.() - setValues(valuesInner) + valuesInner && setValues(valuesInner) }, 200) } }, [valuesInner, show]) diff --git a/packages/vantui/types/picker.d.ts b/packages/vantui/types/picker.d.ts index 7f576f27b..7fe5489a4 100644 --- a/packages/vantui/types/picker.d.ts +++ b/packages/vantui/types/picker.d.ts @@ -186,6 +186,14 @@ export interface PickerChangeEvents extends ITouchEvent { * @description 通过ref获取到的方法如下 */ export type IPickerInstance = { + /** + * @description 手动打开 + */ + open: () => void + /** + * @description 手动关闭 + */ + close: () => void /** * @description 设置每一列的数据，异步获取到最新的values */