diff --git a/src/packages/cascader/__tests__/cascader.spec.tsx b/src/packages/cascader/__tests__/cascader.spec.tsx
index 7d17dffdc3..05b3cc107e 100644
--- a/src/packages/cascader/__tests__/cascader.spec.tsx
+++ b/src/packages/cascader/__tests__/cascader.spec.tsx
@@ -385,4 +385,35 @@ describe('Cascader', () => {
     fireEvent.click(tabPane)
     expect(container).toMatchSnapshot()
   })
+
+  it('ref', async () => {
+    const change = jest.fn()
+    const pathChange = jest.fn()
+    const ref = React.createRef<any>()
+    const { container } = render(
+      <>
+        <Cascader
+          value={['福建', '福州', '鼓楼区']}
+          ref={ref}
+          options={mockOptions}
+          onChange={change}
+          onPathChange={pathChange}
+        />
+        <div id="t" onClick={() => ref.current?.open()}>
+          Test
+        </div>
+      </>
+    )
+    const ele = container.querySelector('#t')
+    if (ele) {
+      fireEvent.click(ele)
+    }
+    const overlay = container.querySelector('.nut-overlay')
+    if (overlay) {
+      fireEvent.click(overlay)
+      waitFor(() => {
+        expect(ref.current.close).toBeCalled()
+      })
+    }
+  })
 })
diff --git a/src/packages/cascader/cascader.taro.tsx b/src/packages/cascader/cascader.taro.tsx
index 17f634bcaf..babba6dc85 100644
--- a/src/packages/cascader/cascader.taro.tsx
+++ b/src/packages/cascader/cascader.taro.tsx
@@ -5,6 +5,7 @@ import React, {
   useState,
   useEffect,
   ReactNode,
+  useImperativeHandle,
 } from 'react'
 import classNames from 'classnames'
 import { Loading, Checklist } from '@nutui/icons-react-taro'
@@ -64,12 +65,16 @@ export interface CascaderProps
   onPathChange: (value: CascaderValue, params: any) => void
 }
 
+export type CascaderActions = {
+  open: () => void
+  close: () => void
+}
+
 const defaultProps = {
   ...ComponentDefaults,
   activeColor: '',
   activeIcon: 'checklist',
   popup: true,
-  visible: false,
   options: [],
   optionKey: { textKey: 'text', valueKey: 'value', childrenKey: 'children' },
   format: {},
@@ -118,6 +123,20 @@ const InternalCascader: ForwardRefRenderFunction<
     defaultValue,
     finalValue: defaultValue,
   })
+  const [innerVisible, setInnerVisible] = usePropsValue<boolean>({
+    value: props.visible,
+    defaultValue: undefined,
+    finalValue: false,
+  })
+  const actions: CascaderActions = {
+    open: () => {
+      setInnerVisible(true)
+    },
+    close: () => {
+      setInnerVisible(false)
+    },
+  }
+  useImperativeHandle(ref, () => actions)
 
   const [state] = useState({
     optionsData: [] as any,
@@ -284,6 +303,7 @@ const InternalCascader: ForwardRefRenderFunction<
   }
 
   const close = () => {
+    setInnerVisible(false)
     onClose && onClose()
   }
 
@@ -454,7 +474,7 @@ const InternalCascader: ForwardRefRenderFunction<
       {popup ? (
         <Popup
           {...popupProps}
-          visible={visible}
+          visible={innerVisible}
           position="bottom"
           style={{ overflowY: 'hidden' }}
           round
diff --git a/src/packages/cascader/cascader.tsx b/src/packages/cascader/cascader.tsx
index e5ab2a18c2..3d3196ee81 100644
--- a/src/packages/cascader/cascader.tsx
+++ b/src/packages/cascader/cascader.tsx
@@ -5,6 +5,7 @@ import React, {
   useState,
   useEffect,
   ReactNode,
+  useImperativeHandle,
 } from 'react'
 import classNames from 'classnames'
 import { Loading, Checklist } from '@nutui/icons-react'
@@ -63,12 +64,16 @@ export interface CascaderProps
   onPathChange: (value: CascaderValue, params: any) => void
 }
 
+export type CascaderActions = {
+  open: () => void
+  close: () => void
+}
+
 const defaultProps = {
   ...ComponentDefaults,
   activeColor: '',
   activeIcon: 'checklist',
   popup: true,
-  visible: false,
   options: [],
   optionKey: { textKey: 'text', valueKey: 'value', childrenKey: 'children' },
   format: {},
@@ -117,6 +122,20 @@ const InternalCascader: ForwardRefRenderFunction<
     defaultValue,
     finalValue: defaultValue,
   })
+  const [innerVisible, setInnerVisible] = usePropsValue<boolean>({
+    value: props.visible,
+    defaultValue: undefined,
+    finalValue: false,
+  })
+  const actions: CascaderActions = {
+    open: () => {
+      setInnerVisible(true)
+    },
+    close: () => {
+      setInnerVisible(false)
+    },
+  }
+  useImperativeHandle(ref, () => actions)
 
   const [state] = useState({
     optionsData: [] as any,
@@ -283,6 +302,7 @@ const InternalCascader: ForwardRefRenderFunction<
   }
 
   const close = () => {
+    setInnerVisible(false)
     onClose && onClose()
   }
 
@@ -453,7 +473,7 @@ const InternalCascader: ForwardRefRenderFunction<
       {popup ? (
         <Popup
           {...popupProps}
-          visible={visible}
+          visible={innerVisible}
           position="bottom"
           round
           closeIcon={closeIcon}
diff --git a/src/packages/cascader/doc.en-US.md b/src/packages/cascader/doc.en-US.md
index 81cdc4ed21..830ac4cb1a 100644
--- a/src/packages/cascader/doc.en-US.md
+++ b/src/packages/cascader/doc.en-US.md
@@ -596,6 +596,13 @@ export default App;
 | onChange | Triggered when the selected value changes | `(value: CascaderValue, params?: any) => void` | `-` |
 | onPathChange | Triggered when the selected item changes | `(value: CascaderValue, params: any) => void` | `-` |
 
+### Ref
+
+| Method | Description | Parameter |
+|------| --- | --- |
+| open | show Cascader | `() => void` |
+| close | Close Cascader | `() => void` |
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/cascader/doc.md b/src/packages/cascader/doc.md
index 5b8b275374..3a4c84fd9c 100644
--- a/src/packages/cascader/doc.md
+++ b/src/packages/cascader/doc.md
@@ -596,6 +596,13 @@ export default App;
 | onChange | 选中值改变时触发 | `(value: CascaderValue, params?: any) => void` | `-` |
 | onPathChange | 选中项改变时触发 | `(value: CascaderValue, params: any) => void` | `-` |
 
+### Ref
+
+| 事件名  | 说明 | 回调参数 |
+|------| --- | --- |
+| open | 显示 Cascader | `() => void` |
+| close  | 关闭 Cascader | `() => void` |
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/cascader/doc.taro.md b/src/packages/cascader/doc.taro.md
index 31a3a9136d..caea39f444 100644
--- a/src/packages/cascader/doc.taro.md
+++ b/src/packages/cascader/doc.taro.md
@@ -595,7 +595,12 @@ export default App;
 | onLoad | 动态加载回调，开启动态加载时生效 |  `(node: any, resolve: any) => void` | `-` |
 | onChange | 选中值改变时触发 | `(value: CascaderValue, params?: any) => void` | `-` |
 | onPathChange | 选中项改变时触发 | `(value: CascaderValue, params: any) => void` | `-` |
+### Ref
 
+| 事件名  | 说明 | 回调参数 |
+|------| --- | --- |
+| open | 显示 Cascader | `() => void` |
+| close  | 关闭 Cascader | `() => void` |
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/cascader/doc.zh-TW.md b/src/packages/cascader/doc.zh-TW.md
index 1afbc21b9f..18553a60d8 100644
--- a/src/packages/cascader/doc.zh-TW.md
+++ b/src/packages/cascader/doc.zh-TW.md
@@ -596,6 +596,12 @@ export default App;
 | onChange | 選中值改變時觸發 | `(value: CascaderValue, params?: any) => void` | `-` |
 | onPathChange | 選中項改變時觸發 | `(value: CascaderValue, params: any) => void` | `-` |
 
+### Ref
+
+|事件名 |說明 |回調參數 |
+|------| --- | --- |
+| open | 顯示 Cascader | `() => void` |
+| close  | 關閉 Cascader | `() => void` |
 ## 主題定制
 
 ### 樣式變量