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
*/