diff --git a/.eslintrc.js b/.eslintrc.js
index 828b0f3dceb4f8b9eaf56d2257e5116dd0f655c2..8219d8ec95ab95e62834da6aff8325a6ed4ab06f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -35,7 +35,7 @@ module.exports = {
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "space-before-function-paren": "off",
-    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/component-definition-name-casing": ["error", "PascalCase"],
     "vue/attributes-order": "off",
     "vue/one-component-per-file": "off",
     "vue/html-closing-bracket-newline": "off",
diff --git a/docs/src/components/LayTableBox.vue b/docs/src/components/LayTableBox.vue
index 412c71b638062704bf5c789d8bbbb7fa2f385576..7773b9cc4fe51274a1414db1698290c32e96348d 100644
--- a/docs/src/components/LayTableBox.vue
+++ b/docs/src/components/LayTableBox.vue
@@ -29,7 +29,7 @@
 .lay-table-box table th code,
 .lay-table-box table td code {
   line-height: 26px;
-  white-space: nowrap;
+  white-space: pre-wrap;
 }
 .lay-table-box table th {
   color: #666;
@@ -37,7 +37,7 @@
   background-color: #fafafa;
 }
 
-.lay-table-box a{
-  color: #1E9FFF;
+.lay-table-box a {
+  color: #1e9fff;
 }
 </style>
diff --git a/docs/src/document/zh-CN/components/autoComplete.md b/docs/src/document/zh-CN/components/autoComplete.md
index 7d637edb70e3afbb3b858f49c09a9a5b66b444e6..9f547099c407fe1d5db0f6b5c324739eaf1a42ed 100644
--- a/docs/src/document/zh-CN/components/autoComplete.md
+++ b/docs/src/document/zh-CN/components/autoComplete.md
@@ -293,18 +293,19 @@ export default {
 
 ::: table
 
-| 属性                 | 描述                                                                                                             | 类型                                        | 默认值  | 可选值              |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------- | ------------------- |
-| name                 | 原始属性 name                                                                                                    | `string`                                    | --      | --                  |
-| placeholder          | 提示信息                                                                                                         | `string`                                    | --      | --                  |
-| disabled             | 禁用状态                                                                                                         | `boolean`                                   | `false` | `true` `false`      |
-| v-model / modelValue | 值                                                                                                               | `string` `number`                           | --      | --                  |
-| allow-clear          | 清空操作                                                                                                         | `boolean`                                   | `false` | `true` `false`      |
-| fetchSuggestions     | 查询建议回调方法，用于加载建议列表 (value: string)，参数 value 为 input 输入内容，其返回值规定为 Promise 对象 。 | `Function`                                  | --      | --                  |
-| contentStyle         | 继承至 dropdown 组件，用于设置下拉面板的 style 属性                                                              | `StyleValue`                                | --      | --                  |
-| contentClass         | 继承至 dropdown 组件，用于设置下拉面板的 class 属性                                                              | `string` `Array<string \| object>` `object` | --      | --                  |
-| autoFitWidth         | 继承至 dropdown 组件，用于设置下拉面板是否与输入框宽度相同                                                       | `boolean`                                   | `false` | `true` `false`      |
-| size                 | 尺寸 (1.9.4 新增)                                                                                                | `string`                                    | `md`    | `lg` `md` `sm` `xs` |
+| 属性                 | 描述                            | 类型                                        | 默认值  | 可选值              |版本        |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------- | ------------------- |--------- |
+| name                 | 原始属性 name                                                                                                    | `string`                                    | --      | --                  |           |
+| placeholder          | 提示信息                                                                                                         | `string`                                    | --      | --                  |           |
+| disabled             | 禁用状态                                                                                                         | `boolean`                                   | `false` | `true` `false`      |           |
+| v-model / modelValue | 值                                                                                                               | `string` `number`                           | --      | --                  |           |
+| allow-clear          | 清空操作                                                                                                         | `boolean`                                   | `false` | `true` `false`      |           |
+| fetchSuggestions     | 查询建议回调方法，用于加载建议列表 (value: string)，参数 value 为 input 输入内容，其返回值规定为 Promise 对象 。 | `Function`                                  | --      | --                  |           |
+| contentStyle         | 继承至 dropdown 组件，用于设置下拉面板的 style 属性                                                              | `StyleValue`                                | --      | --                   |          |
+| contentClass         | 继承至 dropdown 组件，用于设置下拉面板的 class 属性                                                              | `string` `Array<string \| object>` `object` | --      | --                  |           |
+| autoFitWidth         | 继承至 dropdown 组件，用于设置下拉面板是否与输入框宽度相同                                                       | `boolean`                                   | `false` | `true` `false`      |           |
+| size                 | 尺寸 (1.9.4 新增)          | `string`                                    | `md`    | `lg` `md` `sm` `xs` |           |
+| teleportProps       | 继承至 dropdown 组件，下拉面板 `传递` 属性  | `object`             | `{to: 'body', disabled: false}`   |  `vue teleport` 组件  | <lay-tag type="primary" size="sm">2.19.0新增</lay-tag> |
 
 :::
 
diff --git a/docs/src/document/zh-CN/components/button.md b/docs/src/document/zh-CN/components/button.md
index 96641ee23fd16a8a5d63bc4f76ca618b9c6abc42..69562bd6d8e7058a42894ff2bd771dfa5b4e4a59 100644
--- a/docs/src/document/zh-CN/components/button.md
+++ b/docs/src/document/zh-CN/components/button.md
@@ -247,7 +247,7 @@ const clickHandle = () => {
 <template>
 	<lay-button-group>
   	<lay-button type="primary">更多操作</lay-button>   
-  	<lay-dropdown placement="bottom-end" updateAtScroll>
+  	<lay-dropdown placement="bottom-end">
     	<lay-button type="primary" style="padding-left:8px;padding-right:8px;">
       	<lay-icon type="layui-icon-down"></lay-icon>
     	</lay-button>
diff --git a/docs/src/document/zh-CN/components/cascader.md b/docs/src/document/zh-CN/components/cascader.md
index 41ed276f5670a757a59630ae1dd1602a81537a0d..06f9161bce64b19838e6fa050c6760d10e44959b 100644
--- a/docs/src/document/zh-CN/components/cascader.md
+++ b/docs/src/document/zh-CN/components/cascader.md
@@ -1130,26 +1130,29 @@ const options3=[
 
 ::: table
 
-| 属性                     | 描述                  | 类型                  | 可选值                  | 默认值                  |
+| 属性                     | 描述                  | 类型                  |  默认值           |版本          |
 | -----------------------  | -------------------- |-------------------- |-------------------- |-------------------- |
 | placeholder              | 提示信息                                  | `string` | -- | -- | 
 | v-model / modelValue     | 值                                       | `string` `Array<string>` | -- | -- | 
 | decollator               | 分割符号，默认为 /                         | `string` | -- | -- | 
 | options                  | 选项参数 格式请见上面的demo                 | -- | -- | -- | 
-| onlyLastLevel            | 回显display仅显示最后一级                  | `boolean` | -- | `false` | 
+| onlyLastLevel            | 回显display仅显示最后一级                  | `boolean` | `false` | -- | 
 | replaceFields            | 字段别名                                  | `{label: string, value: string, children: string}` | -- | -- | 
 | allow-clear              | 默认slot提供清空功能，与lay-input保持一致    | `boolean` | -- | -- | 
 | size                     | 尺寸参数，与lay-input保持一致               | -- | -- | -- | 
 | contentStyle             | 内容自定义样式                             | `StyleValue` | -- | -- |
 | contentClass             | 内容自定义Class                          | `string` `Array<string \| object>` `object` | -- | -- |
 | disabled                 | 禁用                                    | `boolean`  | --  | --  |
-| checkStrictly            | 严格模式   `2.18.0`                              | `boolean` | -- | -- |
-| lazy                     | 是否启用懒加载  `2.18.0`                          | `boolean` | -- | -- |
-| load                     | 懒加载方法  `2.18.0`                             | `CascaderPanelLazyloadFunction` | -- | -- |
-| search                   | 是否启用搜索  `2.18.0`                           | `boolean` | -- | -- |
-| searchMethod             | 搜索方法  `2.18.0`                               | `(value: string) => Array<CascaderPanelItemProps>` | -- | -- |
-| multiple                 | 多选模式  `2.18.0`                               | `boolean` | -- | -- |
-| fullpath                 | 多选模式下显示Tag的完整路径  `2.18.0`              | `boolean` | -- | -- |
+| checkStrictly            | 严格模式        | `boolean` | -- | <lay-tag type="primary" size="sm">2.18.0 新增</lay-tag> |
+| lazy                     | 是否启用懒加载       | `boolean` | -- | <lay-tag type="primary" size="sm">2.18.0 新增</lay-tag> |
+| load                     | 懒加载方法           | `CascaderPanelLazyloadFunction` | -- | <lay-tag type="primary" size="sm">2.18.0 新增</lay-tag> |
+| search                   | 是否启用搜索           | `boolean` | -- | <lay-tag type="primary" size="sm">2.18.0 新增</lay-tag> |
+| searchMethod             | 搜索方法            | `(value: string) => Array<CascaderPanelItemProps>` | -- | <lay-tag type="primary" size="sm">2.18.0 新增</lay-tag> |
+| multiple                 | 多选模式           | `boolean` | -- | <lay-tag type="primary" size="sm">2.18.0 新增</lay-tag> |
+| fullpath                 | 多选模式下显示Tag的完整路径               | `boolean` | -- | <lay-tag type="primary" size="sm">2.18.0 新增</lay-tag> |
+| min-collapsed-num        | 多选模式下显示Tag超过指定标签后开启折叠       | `number` | `3` | <lay-tag type="primary" size="sm">2.19.0 新增</lay-tag>  |
+| collapse-tags-tooltip    | 多选模式下显示Tag折叠提示      | `boolean` | -- | <lay-tag type="primary" size="sm">2.19.0 新增</lay-tag> |
+| teleport-props        | 继承至 dropdown 组件，下拉面板 `传递` 属性              | `object`   | `{to: 'body', disabled: false}` | <lay-tag type="primary" size="sm">2.19.0 新增</lay-tag>|
 :::
 
 ::: title Cascader 事件
diff --git a/docs/src/document/zh-CN/components/checkcard.md b/docs/src/document/zh-CN/components/checkcard.md
index b49d8f43f69a7b3f6c152ff750862bbd60b10e1d..907fa0ff215ba57abe7412ddf0451cfa494fddde 100644
--- a/docs/src/document/zh-CN/components/checkcard.md
+++ b/docs/src/document/zh-CN/components/checkcard.md
@@ -304,7 +304,7 @@ export default {
     avatar="http://abc.pearadmin.com/logo-png.png"
     title="标题">
      <template #extra>
-     <lay-dropdown placement="top"  updateAtScroll>
+     <lay-dropdown placement="top">
         <lay-icon type="layui-icon-more" @click.stop></lay-icon>
         <template #content>
             <lay-dropdown-menu>
diff --git a/docs/src/document/zh-CN/components/colorPicker.md b/docs/src/document/zh-CN/components/colorPicker.md
index 9e8872bad347a2ad80700b1150b7c3e0a20039fb..48894023fc6821528504284c5de711d81bf60c08 100644
--- a/docs/src/document/zh-CN/components/colorPicker.md
+++ b/docs/src/document/zh-CN/components/colorPicker.md
@@ -128,22 +128,23 @@ const color5 = ref("");
 
 :::
 
-::: title Icon Picker 属性
+::: title Color Picker 属性
 :::
 
 ::: table
 
-|            |          |     |   |   | 
+|   属性         |    说明      |  类型   | 默认值  | 版本  | 
 | ---------- | -------- | --- |--- |--- |
 | v-model    | 选中色   | --  |--  |--  |
 | preset | 预设颜色 | --  |--  |--  |
-| size | 尺寸 | --  |--  |--  |
-| eyeDropper | 取色器 | `boolean`  |--  |--  |
-| disabled | 禁用 | `boolean`  |--  |lfase  |
-| allowClear | 是否允许清空 | `boolean`  |--  | false |
-| simple | 是否即时改变`modelValue` | `boolean`  |--  | true |
-| contentStyle             | 内容自定义样式     | `StyleValue` | -- | -- |
-| contentClass             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
+| size      | 尺寸大小  | `string`    | `lg` `md` `sm` `xs`   |`md`     |  |
+| eye-dropper | 取色器 | `boolean`  | `false`  |--  |
+| disabled | 禁用 | `boolean`  |`false` |  |
+| allow-clear | 是否允许清空 | `boolean`  |`false`  |  |
+| simple | 是否即时改变`modelValue` | `boolean`  |`true`  |  |
+| content-style             | 内容自定义样式     | `StyleValue` | -- | -- |
+| content-class             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
+| teleport-props        | 继承至 dropdown 组件，下拉面板 `传递` 属性         | `object`         | `{to: 'body', disabled: false}` |  <lay-tag type="primary" size="sm">2.19.0 新增</lay-tag> |
 
 :::
 
diff --git a/docs/src/document/zh-CN/components/dropdown.md b/docs/src/document/zh-CN/components/dropdown.md
index 88cb9ba5331672a8b8d2669e84f971c670907a8e..0121771771121ed9e2432ad5920988cd4fe177bd 100644
--- a/docs/src/document/zh-CN/components/dropdown.md
+++ b/docs/src/document/zh-CN/components/dropdown.md
@@ -14,16 +14,6 @@
 
 <template>
 <lay-space>
-  <lay-dropdown updateAtScroll>
-    <lay-button type="primary">下拉菜单</lay-button>
-    <template #content>
-        <lay-dropdown-menu>
-          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
-          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
-          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
-        </lay-dropdown-menu>
-    </template>
-  </lay-dropdown>
   <lay-dropdown>
     <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
@@ -58,7 +48,7 @@ export default {
 
 <template>
 <lay-space>
-  <lay-dropdown trigger="hover" updateAtScroll>
+  <lay-dropdown trigger="hover">
     <lay-button>Hover 触发</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -68,7 +58,7 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-    <lay-dropdown updateAtScroll>
+    <lay-dropdown>
     <lay-button>Click 触发</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -78,7 +68,7 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-    <lay-dropdown trigger="contextMenu" updateAtScroll>
+    <lay-dropdown trigger="contextMenu">
     <lay-button>contextMenu 触发</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -88,7 +78,7 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-    <lay-dropdown trigger="focus" updateAtScroll>
+    <lay-dropdown trigger="focus" >
     <lay-input placeholder="Focus 触发"></lay-input>
     <template #content>
         <lay-dropdown-menu>
@@ -98,7 +88,7 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-    <lay-dropdown :trigger="['hover','focus','click']" updateAtScroll>
+    <lay-dropdown :trigger="['hover','focus','click']" >
     <lay-input placeholder="hover focus click"></lay-input>
     <template #content>
         <lay-dropdown-menu>
@@ -133,7 +123,7 @@ export default {
   <lay-button @click="manualRef.show()">打开</lay-button>
   <lay-button @click="manualRef.hide()">关闭</lay-button>
   <br><br>
-  <lay-dropdown ref="manualRef" :clickOutsideToClose="false" :clickToClose="false" updateAtScroll>
+  <lay-dropdown ref="manualRef" :clickOutsideToClose="false" :clickToClose="false" >
     <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -167,7 +157,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown :visible="true" updateAtScroll>
+  <lay-dropdown :visible="true" >
     <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -232,7 +222,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown @show="stat='开启'" @hide="stat='关闭'" updateAtScroll>
+  <lay-dropdown @show="stat='开启'" @hide="stat='关闭'" >
     <lay-button type="primary" >当前状态:{{stat}}</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -266,37 +256,37 @@ export default {
 
 <template>
 <lay-space wrap>
-  <lay-dropdown placement="top-start" updateAtScroll>
+  <lay-dropdown placement="top-start" >
     <lay-button type="primary">top-start</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="top" updateAtScroll>
+  <lay-dropdown placement="top" >
     <lay-button type="primary">top</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="top-end" updateAtScroll>
+  <lay-dropdown placement="top-end" >
     <lay-button type="primary">top-end</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="bottom-start" updateAtScroll>
+  <lay-dropdown placement="bottom-start" >
     <lay-button type="primary">bottom-start</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="bottom" updateAtScroll>
+  <lay-dropdown placement="bottom" >
     <lay-button type="primary">bottom</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="bottom-end" updateAtScroll>
+  <lay-dropdown placement="bottom-end" >
     <lay-button type="primary">bottom-end</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
@@ -305,37 +295,37 @@ export default {
 </lay-space>
 <br><br>
 <lay-space>
-  <lay-dropdown placement="right-start" updateAtScroll>
+  <lay-dropdown placement="right-start" >
     <lay-button type="primary">right-start</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="right" updateAtScroll>
+  <lay-dropdown placement="right" >
     <lay-button type="primary">right</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="right-end" updateAtScroll>
+  <lay-dropdown placement="right-end" >
     <lay-button type="primary">right-end</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-    <lay-dropdown placement="left-start" updateAtScroll>
+    <lay-dropdown placement="left-start" >
     <lay-button type="primary">left-start</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="left" updateAtScroll>
+  <lay-dropdown placement="left" >
     <lay-button type="primary">left</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <lay-dropdown placement="left-end" updateAtScroll>
+  <lay-dropdown placement="left-end" >
     <lay-button type="primary">left-end</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
@@ -371,7 +361,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown updateAtScroll>
+  <lay-dropdown >
     <lay-button type="primary">图标菜单</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -416,7 +406,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown updateAtScroll>
+  <lay-dropdown >
     <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -518,27 +508,28 @@ export default {
 
 ::: table
 
-| 属性                | 描述                                              | 类型      | 默认值   | 可选值                                          |
-| ------------------- | ------------------------------------------------- | --------- | -------- | ----------------------------------------------- |
-| visible             | 下拉面板是否可见                                  | `boolean` | `true`   | `true` `false`                                  |
-| trigger             | 触发方式,类型 `string` 或 trigger 数组            | `strine` `string[]`  | `click`  | `click` `hover` `focus` `contextMenu`           |
-| disabled            | 是否禁用触发                                      | `boolean` | `false`  | `true` `false`                                  |
-| placement           | 下拉面板位置                                      | `string`  | `bottom` | `top` `bottom` `right` `left` `*-start` `*-end` |
-| autoFitPosition     | 是否自动调整下拉面板位置                          | `boolean` | `true`   | `true` `false`                                  |
-| autoFitWidth        | 是否将下拉面板宽度设置为触发器宽度                | `boolean` | `false`  | `true` `false`                                  |
-| autoFitMinWidth     | 是否将下拉面板最小宽度设置为触发器宽度            | `boolean` | `true`   | `true` `false`                                  |
-| updateAtScroll      | 是否在容器滚动时更新下拉面板的位置                | `boolean` | `false`  | `true` `false`                                  |
-| autoFixPosition     | 是否在触发器或下拉面板尺寸变化时更新下拉面板位置  | `boolean` | `true`   | `true` `false`                                  |
-| clickToClose        | 是否在点击触发器时关闭面板                        | `boolean` | `true`   | `true` `false`                                  |
-| blurToClose         | 是否在触发器失去焦点时关闭面板                    | `boolean` | `true`   | `true` `false`                                  |
-| clickOutsideToClose | 是否点击外部关闭下拉面板                          | `boolean` | `true`   | `true` `false`                                  |
-| contentOffset       | 下拉面板距离触发器的偏移距离                      | `string`  | `2px`    | -                                               |
-| mouseEnterDelay     | mouseEnter 事件延迟触发的时间, trigger hover 有效 | `number`  | `150`    | -                                               |
-| mouseLeaveDelay     | mouseLeave 事件延迟触发的时间, trigger hover 有效 | `number`  | `150`    | -                                               |
-| focusDelay          | focus 事件延迟触发的时间, trigger focus 有效      | `number`  | `150`    | -                                               |
+| 属性                | 描述                                              | 类型      | 默认值   | 可选值                                          | 版本                  |
+| ------------------- | ------------------------------------------------- | --------- | -------- | ----------------------------------------------- |----------------- |
+| visible             | 下拉面板是否可见                                  | `boolean` | `true`   | `true` `false`                                  | |
+| trigger             | 触发方式,类型 `string` 或 trigger 数组            | `strine` `string[]`  | `click`  | `click` `hover` `focus` `contextMenu`           | |
+| disabled            | 是否禁用触发                                      | `boolean` | `false`  | `true` `false`                                  | |
+| placement           | 下拉面板位置                                      | `string`  | `bottom` | `top` `bottom` `right` `left` `*-start` `*-end` | |
+| autoFitPosition     | 是否自动调整下拉面板位置                          | `boolean` | `true`   | `true` `false`                                  | |
+| autoFitWidth        | 是否将下拉面板宽度设置为触发器宽度                | `boolean` | `false`  | `true` `false`                                  | |
+| autoFitMinWidth     | 是否将下拉面板最小宽度设置为触发器宽度            | `boolean` | `true`   | `true` `false`                                  | |
+| updateAtScroll      | 是否在容器滚动时更新下拉面板的位置                | `boolean` | `false`  | `true` `false`                                  | <lay-tag type="danger" size="sm">2.19.0删除</lay-tag> |
+| autoFixPosition     | 是否在触发器或下拉面板尺寸变化时更新下拉面板位置  | `boolean` | `true`   | `true` `false`                                  | <lay-tag type="danger" size="sm">2.19.0删除</lay-tag> |
+| clickToClose        | 是否在点击触发器时关闭面板                        | `boolean` | `true`   | `true` `false`                                  | |
+| blurToClose         | 是否在触发器失去焦点时关闭面板                    | `boolean` | `true`   | `true` `false`                                  | |
+| clickOutsideToClose | 是否点击外部关闭下拉面板                          | `boolean` | `true`   | `true` `false`                                  | |
+| contentOffset       | 下拉面板距离触发器的偏移距离                      | `string`  | `2px`    | -                                               | |
+| mouseEnterDelay     | mouseEnter 事件延迟触发的时间, trigger hover 有效 | `number`  | `150`    | -                                               | |
+| mouseLeaveDelay     | mouseLeave 事件延迟触发的时间, trigger hover 有效 | `number`  | `150`    | -                                               | |
+| focusDelay          | focus 事件延迟触发的时间, trigger focus 有效      | `number`  | `150`    | -                                               | |
 | alignPoint |跟随鼠标|`boolean`|`false`|`true` `false`|
 | contentClass| 弹出内容的类名  | `string`| -| -|
 | contentStyle| 弹出内容的样式  | `string` | - | -|
+| teleportProps      | 继承至 dropdown 组件，下拉面板 `传递` 属性  | `object`             | `{to: 'body', disabled: false}`   |  `vue teleport` 组件  | <lay-tag type="primary" size="sm">2.19.0新增</lay-tag> |
 
 :::
 
@@ -608,4 +599,4 @@ export default {
 :::
 
 ::: previousNext dropdown
-:::
\ No newline at end of file
+:::
diff --git a/docs/src/document/zh-CN/components/iconPicker.md b/docs/src/document/zh-CN/components/iconPicker.md
index 08650375dc97c2b501eba55f14bf55ad0b7d5226..0e64d70bc0becb7fb3e6e3a96df5134d3811ddb8 100644
--- a/docs/src/document/zh-CN/components/iconPicker.md
+++ b/docs/src/document/zh-CN/components/iconPicker.md
@@ -91,7 +91,7 @@ export default {
 ::: demo 通过 page 属性开启图标列表的分页展示
 
 <template>
-  <lay-icon-picker v-model="icon" type="layui-icon-face-smile" page></lay-icon-picker>
+  <lay-icon-picker v-model="icon" page></lay-icon-picker>
 </template>
 
 <script>
@@ -117,7 +117,7 @@ export default {
 ::: demo 通过 showSearch 开启图标列表的搜索功能
 
 <template>
-  <lay-icon-picker v-model="icon" type="layui-icon-face-smile" page showSearch></lay-icon-picker>
+  <lay-icon-picker v-model="icon" page showSearch></lay-icon-picker>
 </template>
 
 <script>
@@ -142,18 +142,19 @@ export default {
 
 ::: table
 
-| 属性           |  说明        |  类型   | 默认值  | 可选值  |
+| 属性           |  说明        |  类型   | 默认值  | 版本  |
 | ---------- | -------- | --- |--- |--- |
 | v-model    | 默认值   | --  |--  |--  |
 | page       | 开启分页 | --  |--  |--  |
-| size       | 尺寸 | --  |--  |--  |
-| showSearch | 启用搜索 | --  |--  |--  |
+| size      | 尺寸大小  | `string`    | `lg` `md` `sm` `xs`   |`md`     |  |
+| show-search | 启用搜索 | --  |--  |--  |
 | disabled | 禁用 | `boolean`  |--  |--  |
 | allow-clear | 允许清空 | `boolean`  |--  |--  |
-| contentStyle             | 内容自定义样式     | `StyleValue` | -- | -- |
-| contentClass             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
+| content-style             | 内容自定义样式     | `StyleValue` | -- | -- |
+| content-class             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
+| teleport-props        | 继承至 dropdown 组件，下拉面板 `传递` 属性         | `object`         | `{to: 'body', disabled: false}` |  <lay-tag type="primary" size="sm">2.19.0 新增</lay-tag> |
 
 :::
 
 ::: previousNext iconPicker
-:::
\ No newline at end of file
+:::
diff --git a/docs/src/document/zh-CN/components/select.md b/docs/src/document/zh-CN/components/select.md
index 787dc8475c36af1a2792258463658958f393acb1..761af4266486bcbeff36581233fd7195281b29b2 100644
--- a/docs/src/document/zh-CN/components/select.md
+++ b/docs/src/document/zh-CN/components/select.md
@@ -402,23 +402,24 @@ export default {
 
 ::: table
 
-| 属性                | 描述                               | 类型                                        | 可选值              | 默认值   |
-| ------------------- | ---------------------------------- | ------------------------------------------- | ------------------- | -------- |
-| v-model             | 选中值                             | `string`/`number`/`Array`                   | -                   | -        |
-| name                | 原生 name 属性                     | `string`                                    | -                   | -        |
-| placeholder         | 默认空提示语                       | `string`                                    | -                   | `请选择` |
-| allowClear            | 允许清空                           | `boolean`                                   | `true` `false`      | `false`  |
-| disabled            | 是否禁用                           | `boolean`                                   | `true` `false`      | `false`  |
-| multiple            | 是否为多选                         | `boolean`                                   | `true` `false`      | `false`  |
-| size                | 尺寸                               | `string`                                    | `lg` `md` `sm` `xs` | `md`     |
-| showSearch          | 开启搜索                           | `boolean`                                   | --                  | --       |
-| searchMethod        | 自定义搜索逻辑 (text, optionProps) | `Function`                                  | --                  | --       |
-| searchPlaceholder   | 搜索提示                           | `string`                                    | --                  | --       |
-| minCollapsedNum     | 多选模式最小折叠数量               | `number`                                    | --                  | --       |
-| collapseTagsTooltip | 多选折叠后时候悬浮展示             | `boolean`                                   | --                  | --       |
-| contentStyle        | 内容自定义样式                     | `StyleValue`                                | --                  | --       |
-| contentClass        | 内容自定义 Class                   | `string` `Array<string \| object>` `object` | --                  | --       |
-| options (items)   |  传入选项                | `Array<Object>` | --                  | --       |
+| 属性                | 描述                               | 类型                                        | 可选值              | 默认值   |版本   |
+| ------------------- | ---------------------------------- | ------------------------------------------- | ------------------- | -------- |------ |
+| v-model             | 选中值                             | `string`/`number`/`Array`                   | -                   | -        |    |
+| name                | 原生 name 属性                     | `string`                                    | -                   | -        |    |
+| placeholder         | 默认空提示语                       | `string`                                    | -                   | `请选择` |    |
+| allowClear            | 允许清空                           | `boolean`                                   | `true` `false`      | `false`  |    |
+| disabled            | 是否禁用                           | `boolean`                                   | `true` `false`      | `false`  |    |
+| multiple            | 是否为多选                         | `boolean`                                   | `true` `false`      | `false`  |    |
+| size                | 尺寸                               | `string`                                    | `lg` `md` `sm` `xs` | `md`     |    |
+| showSearch          | 开启搜索                           | `boolean`                                   | --                  | --       |    |
+| searchMethod        | 自定义搜索逻辑 (text, optionProps) | `Function`                                  | --                  | --       |    |
+| searchPlaceholder   | 搜索提示                           | `string`                                    | --                  | --       |    |
+| minCollapsedNum     | 多选模式最小折叠数量               | `number`                                    | --                  | --       |    |
+| collapseTagsTooltip | 多选折叠后时候悬浮展示             | `boolean`                                   | --                  | --       |    |
+| contentStyle        | 内容自定义样式                     | `StyleValue`                                | --                  | --       |    |
+| contentClass        | 内容自定义 Class                   | `string` `Array<string \| object>` `object` | --                  | --       |    |
+| options (items)   |  传入选项                | `Array<Object>` | --                  | --       |    |
+| teleportProps       | 继承至 dropdown 组件，下拉面板 `传递` 属性  | `object`             | `{to: 'body', disabled: false}`   |  `vue teleport` 组件  | <lay-tag type="primary" size="sm">2.19.0新增</lay-tag> |
 :::
 
 ::: title Select 事件
@@ -430,8 +431,8 @@ export default {
 | ------ | -------------- | ----------------------- |-------- |
 | change | 切换事件       | value                   |  - |
 | search | 关键词变化事件 | 用户输入的关键词 string |  -  |
-| remove-tag | 多选场景删除tag | 删除的选项value | `2.18.3`|
-| clear | 点击清空icon | - |`2.18.3`|
+| remove-tag | 多选场景删除tag | 删除的选项value | <lay-tag type="primary" size="sm">2.18.3新增</lay-tag> |
+| clear | 点击清空icon | - |<lay-tag type="primary" size="sm">2.18.3新增</lay-tag>|
 
 :::
 
diff --git a/docs/src/document/zh-CN/components/tooltip.md b/docs/src/document/zh-CN/components/tooltip.md
index e929c653aee4076f38672e4256ec5c7caa6923fb..44c6e1a0f1f717c4f61f39f4d0bc40d1da3a4e5e 100644
--- a/docs/src/document/zh-CN/components/tooltip.md
+++ b/docs/src/document/zh-CN/components/tooltip.md
@@ -394,7 +394,7 @@ const changeText = () => {
 | is-auto-show   | 控制超出文本 `...` 时自动展示， 没有 `...` 时不展示 | `boolean` | `false` |    | |
 | visible     | 控制显示/隐藏| `boolean`| `false` |  |  | |
 | enterable   | 鼠标能否进入 tooltip 中 | `boolean` | `true` | | |
-| trigger   | 触发方式 | `string` | `hover` | `click` `hover` `contextmenu` `focus` | `2.17.7类型调整为只传string` |
+| trigger   | 触发方式 | `string` | `hover` | `click` `hover` `contextmenu` `focus` | - |
 | popper-class    | tooltip内容box类名 | `string` `array`  |  | | `2.17.7类型删除object` |
 | popper-style     | tooltip内容box类名 | `string` `object` |  | |  |
 
diff --git a/docs/src/document/zh-CN/components/treeSelect.md b/docs/src/document/zh-CN/components/treeSelect.md
index e46d7de2bd5cfec8920c448c55a9d6785fd1c275..ecff93fecf302c721d4bed665f6ee2d34d376543 100644
--- a/docs/src/document/zh-CN/components/treeSelect.md
+++ b/docs/src/document/zh-CN/components/treeSelect.md
@@ -1344,22 +1344,25 @@ const data7 = ref([{
 
 ::: table
 
-| 属性                | 描述                                                             | 类型                                                                                   | 可选值 | 默认值 |
-| ------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------ | ------ |
-| v-model             | 选中值                                                           | --                                                                                     | --     | --     |
-| data                | 树数据                                                           | --                                                                                     | --     | --     |
-| multiple            | 开启多选                                                         | --                                                                                     | --     | --     |
-| allow-clear         | 允许清空                                                         | --                                                                                     | --     | --     |
-| disabled            | 禁用选择                                                         | --                                                                                     | --     | --     |
-| placeholder         | 输入提示                                                         | --                                                                                     | --     | --     |
-| checkStrictly       | 禁用级联复选                                                     | --                                                                                     | --     | --     |
-| collapseTagsTooltip | 折叠提示                                                         | --                                                                                     | --     | --     |
-| minCollapsedNum     | 超过指定标签后开启折叠                                           | --                                                                                     | --     | --     |
-| size                | 尺寸大小                                                         | --                                                                                     | --     | --     |
-| search              | 是否开启搜索                                                     | `boolean`                                                                              | false  | --     |
-| searchNodeMethod    | 对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏 | `Fcuntion(node, value)`                                                                | --     | --     |
-| lazy                | 是否懒加载子节点，需与 `load` 方法结合使用                       | false                                                                                  |        |
-| load                | 加载子树数据的方法，仅当 `lazy` 属性为 true 时生效               | function(node, resolve)，node 为当前点击的节点，resolve 为数据加载完成的回调(必须调用) |        |
+| 属性                  | 描述                                                             | 类型                                                                                     | 可选值                          | 默认值              | 版本                                                    |
+| --------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------- | ------------------- | ------------------------------------------------------- |
+| v-model               | 选中值                                                           | `string` `number` `array`                                                                | --                              | --                  |                                                         |
+| data                  | 树数据                                                           | `Array<{}>`                                                                              | --                              | --                  |                                                         |
+| size                  | 尺寸大小                                                         | `string`                                                                                 | `lg` `md` `sm` `xs`             | `md`                |                                                         |
+| multiple              | 开启多选                                                         | `boolean`                                                                                | --                              | `false`             |                                                         |
+| allow-clear           | 允许清空                                                         | `boolean`                                                                                | --                              | `false`             |                                                         |
+| disabled              | 禁用选择                                                         | `boolean`                                                                                | --                              | `false`             |                                                         |
+| placeholder           | 输入提示                                                         | `string`                                                                                 | --                              | --                  |                                                         |
+| check-strictly        | 禁用级联复选                                                     | `boolean`                                                                                | --                              | `true`              |                                                         |
+| collapse-tags-tooltip | 折叠提示                                                         | `boolean`                                                                                | --                              | `true`              |                                                         |
+| min-collapsed-num     | 超过指定标签后开启折叠                                           | `number`                                                                                 | --                              | `3`                 |                                                         |
+| search                | 是否开启搜索                                                     | `boolean`                                                                                | --                              | `false`             |                                                         |
+| search-node-method    | 对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏 | `Fcuntion(node, value)`                                                                  | --                              | --                  |                                                         |
+| lazy                  | 是否懒加载子节点，需与 `load` 方法结合使用                       | `boolean`                                                                                | --                              | `false`             |
+| load                  | 加载子树数据的方法，仅当 `lazy` 属性为 `true` 时生效             | `function(node, resolve)`，node 为当前点击的节点，resolve 为数据加载完成的回调(必须调用) | --                              | --                  |
+| replace-fields        | 替换 data 中`id` `title` `children` 字段名                       | --                                         | --                              | `{id: "id", title: "title", children: "children"}`                  |
+| default-expand-all    | 是否展开所有 `tree` 节点                                         | `boolean`                                                                                | --                              | `false`             |
+| teleport-props        | 继承至 dropdown 组件，下拉面板 `传递` 属性                       | `object`                                                                                 | `{to: 'body', disabled: false}` | `vue teleport` 组件 | <lay-tag type="primary" size="sm">2.19.0 新增</lay-tag> |
 
 :::
 
diff --git a/package.json b/package.json
index aee763624edc69ec592f3d04ae0b96a62b31ff7a..26e30a6b6f51fa1fcba649122a3f3be11dbd67c5 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^9.27.0",
     "execa": "^6.1.0",
     "happy-dom": "9.8.2",
     "husky": "^8.0.1",
diff --git a/packages/component/component/autoComplete/__tests__/auto-complete.test.tsx b/packages/component/component/autoComplete/__tests__/auto-complete.test.tsx
index 0144e5c184d047172c463ec21671070208cc307c..bd6b5f2ca340098304c02d99074d9055c5567b08 100644
--- a/packages/component/component/autoComplete/__tests__/auto-complete.test.tsx
+++ b/packages/component/component/autoComplete/__tests__/auto-complete.test.tsx
@@ -1,63 +1,123 @@
-import { reactive, nextTick } from "vue";
-import { describe, expect, test } from "vitest";
-import { mount } from "@vue/test-utils";
-import LayAutocomplete from "../index";
-
-const FETCH_SUGGESTIONS = () => {
-  return Promise.resolve([
-    { value: "test1" },
-    { value: "test2" },
-    { value: "test3" },
-  ]);
-};
-
-const _mount = (props) => {
-  const state = reactive({
-    value: "",
-    fetchSuggestions: function () {
-      return Promise.resolve([
-        { value: "test1" },
-        { value: "test2" },
-        { value: "test3" },
-      ]);
-    },
-    props,
-  });
-
-  return mount(() => (
-    <LayAutocomplete
-      v-model={state.value}
-      fetchSuggestions={state.fetchSuggestions}
-      {...state.props}
-    ></LayAutocomplete>
-  ));
-};
-
-describe("LayAutocomplete.vue", () => {
-  test("test LayAutocomplete placeholder", async () => {
-    const placeholder = "test LayAutocomplete placeholder";
-    const wrapper = _mount({
-      placeholder,
-    });
-    expect(wrapper.find("input").attributes("placeholder")).toContain(
-      placeholder
-    );
-  });
-
-  test("test LayAutocomplete disabled", async () => {
-    const wrapper = _mount({
-      disabled: true,
-    });
-    expect(wrapper.find(".layui-input-wrapper").classes()).toContain(
-      "layui-input-disabled"
-    );
-  });
-
-  test("test LayAutocomplete allow-clear", async () => {
-    const wrapper = _mount({
-      allowClear: true,
-      modelValue: "123",
-    });
-    expect(wrapper.find(".layui-input-clear").exists()).toBe(true);
-  });
-});
+import { reactive, nextTick } from "vue";
+import { describe, expect, test, afterEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { sleep } from "../../../test-utils";
+
+import LayAutocomplete from "../index.vue";
+import LayDropdown from "../../dropdown/index.vue";
+
+const FETCH_SUGGESTIONS = () => {
+  return Promise.resolve([
+    { value: "test1" },
+    { value: "test2" },
+    { value: "test3" },
+  ]);
+};
+
+const _mount = (props: any) => {
+  const state = reactive({
+    value: "",
+    fetchSuggestions: function () {
+      return Promise.resolve([
+        { value: "test1" },
+        { value: "test2" },
+        { value: "test3" },
+      ]);
+    },
+    props,
+  });
+
+  return mount(() => (
+    <LayAutocomplete
+      v-model={state.value}
+      fetchSuggestions={state.fetchSuggestions}
+      {...state.props}
+    ></LayAutocomplete>
+  ));
+};
+
+describe("LayAutocomplete.vue", () => {
+  afterEach(() => {
+    const popperDom = document.body.querySelector(".layui-popper");
+    if (popperDom) {
+      popperDom.remove();
+    }
+  });
+
+  test("test LayAutocomplete placeholder", async () => {
+    const placeholder = "test LayAutocomplete placeholder";
+    const wrapper = _mount({
+      placeholder,
+    });
+    expect(wrapper.find("input").attributes("placeholder")).toContain(
+      placeholder
+    );
+  });
+
+  test("test LayAutocomplete disabled", async () => {
+    const wrapper = _mount({
+      disabled: true,
+    });
+    expect(wrapper.find(".layui-input-wrapper").classes()).toContain(
+      "layui-input-disabled"
+    );
+  });
+
+  test("test LayAutocomplete allow-clear", async () => {
+    const wrapper = _mount({
+      allowClear: true,
+      modelValue: "123",
+    });
+    expect(wrapper.find(".layui-input-clear").exists()).toBe(true);
+  });
+
+  test("是否只有input可触发dropdown", async () => {
+    const wrapper = _mount({});
+
+    const inputComponent = wrapper.find(".layui-input");
+    const inputDom = wrapper.find(".layui-input input");
+    const dropDownDom = wrapper.findComponent(LayDropdown);
+
+    await inputComponent.trigger("click");
+
+    expect((dropDownDom.vm as any).$.setupState.open).toBeFalsy();
+
+    await inputDom.setValue("1");
+    await inputDom.trigger("input");
+
+    await nextTick();
+    await sleep();
+
+    expect((dropDownDom.vm as any).$.setupState.open).toBe(true);
+  });
+
+  test("dropdown 是否正常关闭", async () => {
+    const wrapper = _mount({});
+
+    const inputComponent = wrapper.find(".layui-input");
+    const inputDom = wrapper.find(".layui-input input");
+    const dropDownDom = wrapper.findComponent(LayDropdown);
+
+    await inputComponent.trigger("click");
+    await inputDom.setValue("1");
+    await inputDom.trigger("input");
+
+    await nextTick();
+    await sleep();
+
+    const selectOptions = document.body.querySelectorAll(
+      ".lay-autocomplete-content .lay-autocomplete-option"
+    );
+
+    // dropdown 数据长度
+    expect(selectOptions.length).toBe(3);
+
+    expect((dropDownDom.vm as any).$.setupState.open).toBe(true);
+    await selectOptions[1].dispatchEvent(new Event("click"));
+    expect((dropDownDom.vm as any).$.setupState.open).toBeFalsy();
+
+    expect(wrapper.findComponent(LayAutocomplete).props("modelValue")).toBe(
+      "test2"
+    );
+  });
+});
diff --git a/packages/component/component/autoComplete/index.vue b/packages/component/component/autoComplete/index.vue
index 55ee8079be523dd07d8f4d7dde83d9fac9394a8b..fce74432be5cf5aadc069a657fde5b8ff40a045b 100644
--- a/packages/component/component/autoComplete/index.vue
+++ b/packages/component/component/autoComplete/index.vue
@@ -6,7 +6,7 @@
       :autoFitWidth="autoFitWidth"
       :contentClass="contentClass"
       :contentStyle="contentStyle"
-      :update-at-scroll="true"
+      :teleportProps="teleportProps"
     >
       <lay-input
         :name="name"
@@ -46,26 +46,26 @@
           </div>
         </template>
         <template v-else>
-          <template v-if="innerOptions.length > 0">
-            <lay-dropdown-menu class="lay-autocomplete-content">
-              <template v-for="(option, index) in innerOptions">
-                <lay-dropdown-menu-item
-                  @click="clickOptions(option)"
-                  :class="[
-                    'lay-autocomplete-option',
-                    {
-                      selected: selectedIndex == index,
-                      equals: innerValue == option[replaceFields.value],
-                    },
-                  ]"
-                >
-                  <slot name="default" :option="option">
-                    {{ option.value }}
-                  </slot>
-                </lay-dropdown-menu-item>
-              </template>
-            </lay-dropdown-menu>
-          </template>
+          <lay-dropdown-menu class="lay-autocomplete-content">
+            <template v-if="innerOptions.length">
+              <lay-dropdown-menu-item
+                v-for="(option, index) in innerOptions"
+                :key="option"
+                @click="clickOptions(option)"
+                :class="[
+                  'lay-autocomplete-option',
+                  {
+                    selected: selectedIndex == index,
+                    equals: innerValue == option[replaceFields.value],
+                  },
+                ]"
+              >
+                <slot name="default" :option="option">
+                  {{ option.value }}
+                </slot>
+              </lay-dropdown-menu-item>
+            </template>
+          </lay-dropdown-menu>
         </template>
       </template>
     </lay-dropdown>
@@ -74,6 +74,7 @@
 
 <script lang="ts" setup>
 import type { InputEmits } from "../input/interface";
+import type { DropdownTeleportProps } from "../dropdown/interface";
 
 import { ref, watch, onMounted, onUnmounted, nextTick, StyleValue } from "vue";
 import LayDropdown from "../dropdown/index.vue";
@@ -97,6 +98,7 @@ export interface AutocompleteProps {
   contentStyle?: StyleValue;
   replaceFields?: { value: string };
   size?: AutocompleteSize;
+  teleportProps?: DropdownTeleportProps;
 }
 
 defineOptions({
@@ -199,7 +201,8 @@ watch(innerOptions, () => {
  * 兼容点击 input 时不展示 dropdown.
  * 仅在 @input 触发时展示
  */
-const clickHandler = function () {
+const clickHandler = function (e: Event) {
+  e.stopImmediatePropagation();
   nextTick(() => {
     dropdownRef.value.hide();
   });
@@ -251,42 +254,42 @@ watch([innerValue, innerOptions], () => {
   }
 });
 
-/**
- * 监听 keyup 事件
- *
- * @remark ArrowDown 向下操作
- * @remark ArrowUp 向上操作
- * @remark Enter 回车操作
- */
-onMounted(() => {
-  document.addEventListener("keyup", function (e) {
-    if (isFocus.value === true) {
-      if (e.key === "ArrowDown") {
-        if (selectedIndex.value <= innerOptions.value.length - 2) {
-          selectedIndex.value++;
-        }
+const handleKeyUp = (e: KeyboardEvent) => {
+  if (isFocus.value === true) {
+    if (e.key === "ArrowDown") {
+      if (selectedIndex.value <= innerOptions.value.length - 2) {
+        selectedIndex.value++;
       }
-      if (e.key === "ArrowUp") {
-        if (selectedIndex.value > 0) {
-          selectedIndex.value--;
-        }
+    }
+    if (e.key === "ArrowUp") {
+      if (selectedIndex.value > 0) {
+        selectedIndex.value--;
       }
-      if (e.key === "Enter") {
-        if (selectedIndex.value != -1) {
-          const option = innerOptions.value[selectedIndex.value];
-          innerValue.value = option[props.replaceFields.value];
-          dropdownRef.value.hide();
-          emits("update:modelValue", option.value);
-          emits("select", option);
-        }
+    }
+    if (e.key === "Enter") {
+      if (selectedIndex.value != -1) {
+        const option = innerOptions.value[selectedIndex.value];
+        innerValue.value = option[props.replaceFields.value];
+        dropdownRef.value.hide();
+        emits("update:modelValue", option.value);
+        emits("select", option);
       }
     }
-  });
+  }
+};
+
+// /**
+//  * 监听 keyup 事件
+//  *
+//  * @remark ArrowDown 向下操作
+//  * @remark ArrowUp 向上操作
+//  * @remark Enter 回车操作
+//  */
+onMounted(() => {
+  document.addEventListener("keyup", handleKeyUp);
 });
 
 onUnmounted(() => {
-  document.removeEventListener("keyup", function () {
-    // 注销 keyup 监听
-  });
+  document.removeEventListener("keyup", handleKeyUp);
 });
 </script>
diff --git a/packages/component/component/cascader/__tests__/cascader.test.tsx b/packages/component/component/cascader/__tests__/cascader.test.tsx
index b566817d8a4e699c3c2a616d3ca74e17a57dd1d4..c97745fba0a6ac1aa65eb7d5f79a6bb2ad30acf2 100644
--- a/packages/component/component/cascader/__tests__/cascader.test.tsx
+++ b/packages/component/component/cascader/__tests__/cascader.test.tsx
@@ -1,10 +1,12 @@
-import { nextTick, ref, onMounted } from "vue";
-import { describe, expect, test } from "vitest";
+import { nextTick, ref, onMounted, Ref } from "vue";
+import { describe, expect, expectTypeOf, test } from "vitest";
 import { mount } from "@vue/test-utils";
 
 import LayCascader from "../index.vue";
+import LayDropdown from "../../dropdown/index.vue";
+import { sleep } from "../../../test-utils";
 
-describe("LayTree", () => {
+describe("LayCascader", () => {
   test("options 数据源改变内部未更新", async () => {
     const wrapper = mount({
       setup() {
@@ -31,4 +33,97 @@ describe("LayTree", () => {
 
     expect((component.vm as any)._context.flatData.value.length).toBe(3);
   });
+
+  test("modelValue 兼容", async () => {
+    const wrapper = mount(LayCascader, {
+      props: {
+        options: [
+          {
+            label: "label1",
+            value: "1",
+            children: [
+              {
+                label: "label1-1",
+                value: "1-1",
+                children: [{ label: "label1-1-1", value: "1-1-1" }],
+              },
+            ],
+          },
+          { label: "label2", value: "2" },
+          { label: "label3", value: "3" },
+        ],
+        modelValue: "1/1-1/1-1-1",
+      },
+    });
+
+    const component = wrapper.getComponent(LayCascader);
+
+    await nextTick();
+    expect((component.vm as any)._context.selectLabel.value).toBe(
+      "label1 / label1-1 / label1-1-1"
+    );
+
+    wrapper.setProps({
+      modelValue: ["1", "1-1"],
+    });
+
+    await nextTick();
+    expect((component.vm as any)._context.selectLabel.value).toBe(
+      "label1 / label1-1"
+    );
+  });
+
+  test("modelValue 跟随初始类型", async () => {
+    const wrapper = mount({
+      setup() {
+        const modelValue: Ref<string | string[]> = ref(["1", "1-1"]);
+        const options = ref([
+          {
+            label: "label1",
+            value: "1",
+            children: [
+              {
+                label: "label1-1",
+                value: "1-1",
+                children: [{ label: "label1-1-1", value: "1-1-1" }],
+              },
+            ],
+          },
+          { label: "label2", value: "2" },
+          { label: "label3", value: "3" },
+        ]);
+
+        onMounted(() => {
+          nextTick(() => (modelValue.value = "1/1-1"));
+        });
+
+        return () => (
+          <LayCascader
+            options={options.value}
+            modelValue={modelValue.value}
+          ></LayCascader>
+        );
+      },
+    });
+
+    const component = wrapper.getComponent(LayCascader);
+    await nextTick();
+    expect(component.props("modelValue")).toMatchObject(["1", "1-1"]);
+  });
+
+  test("dropdown 显示和隐藏", async () => {
+    const wrapper = mount(LayCascader, {});
+
+    const component = wrapper.getComponent(LayCascader);
+    const dropdown = wrapper.findComponent(LayDropdown);
+    component.find(".layui-input").trigger("click");
+    await nextTick();
+    await sleep();
+    expect(dropdown).toBeDefined();
+    expect((dropdown.vm as any).open).toBe(true);
+    document.dispatchEvent(new Event("click"));
+    await nextTick();
+    await sleep();
+    expect((dropdown.vm as any).open).toBe(false);
+  });
 });
diff --git a/packages/component/component/cascader/index.vue b/packages/component/component/cascader/index.vue
index 28320737e174e797349010e6f604e3a99249ac0d..057a8ece26863d748832f48f4efc37739448e6c8 100644
--- a/packages/component/component/cascader/index.vue
+++ b/packages/component/component/cascader/index.vue
@@ -16,7 +16,6 @@
       ref="dropdownRef"
       :trigger="trigger"
       :autoFitMinWidth="false"
-      :updateAtScroll="true"
       :disabled="disabled"
       :contentClass="contentClass"
       :contentStyle="contentStyle"
@@ -49,17 +48,19 @@
           </template>
         </lay-input>
         <lay-tag-input
-          v-model="_displayValue"
+          v-else
+          v-model="(_displayValue as string[])"
           v-model:input-value="_searchValue"
           :placeholder="placeholder"
           :allow-clear="allowClear"
           :disabled="disabled"
           :readonly="!search"
+          :minCollapsedNum="minCollapsedNum"
+          :collapseTagsTooltip="collapseTagsTooltip"
           @update:input-value="handleInputSearch"
           @clear="onClear"
           @remove="onRemove"
           @keyup.delete.capture.prevent.stop
-          v-else
         >
           <template #suffix>
             <lay-icon
@@ -168,6 +169,8 @@ const props = withDefaults(defineProps<CascaderProps>(), {
   load: undefined,
   checkStrictly: false,
   fullpath: true,
+  minCollapsedNum: 3,
+  collapseTagsTooltip: true,
 });
 
 const _context = useCascaderPanel(props);
diff --git a/packages/component/component/cascader/interface.ts b/packages/component/component/cascader/interface.ts
index 7803dc14f0c9dcda2e06c716a3752518225e767c..34b5871d144bea71375d816103a38656b5dd3836 100644
--- a/packages/component/component/cascader/interface.ts
+++ b/packages/component/component/cascader/interface.ts
@@ -1,4 +1,6 @@
 import { StyleValue } from "vue";
+import type { DropdownTeleportProps } from "../dropdown/interface";
+
 import {
   CascaderPanelItemProps,
   CascaderPanelLazyloadFunction,
@@ -28,4 +30,7 @@ export interface CascaderProps {
   fullpath?: boolean;
   search?: boolean;
   searchMethod?: (value: string) => Array<CascaderPanelItemProps>;
+  minCollapsedNum?: number;
+  collapseTagsTooltip?: boolean;
+  teleportProps?: DropdownTeleportProps;
 }
diff --git a/packages/component/component/colorPicker/index.vue b/packages/component/component/colorPicker/index.vue
index 8bf8146f7f556078b52269bfb5b90abcb2a8af96..270d8ad01f9196f4da751a29a4a40f80312d310b 100644
--- a/packages/component/component/colorPicker/index.vue
+++ b/packages/component/component/colorPicker/index.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import "./index.less";
+import type { DropdownTeleportProps } from "../dropdown/interface";
+
 import LayDropdown from "../dropdown/index.vue";
 import { ref, computed, watch, onMounted, StyleValue, nextTick } from "vue";
 import { useEyeDropper, useDebounceFn } from "@vueuse/core";
@@ -19,6 +21,7 @@ export interface ColorPicker {
   size?: string;
   allowClear?: boolean;
   simple?: boolean;
+  teleportProps?: DropdownTeleportProps;
 }
 
 defineOptions({
@@ -489,7 +492,7 @@ function hex2rgba(s: any) {
     :disabled="disabled"
     :contentClass="contentClass"
     :contentStyle="contentStyle"
-    updateAtScroll
+    :teleportProps="teleportProps"
     @hide="openState = false"
     @show="openState = true"
   >
diff --git a/packages/component/component/datePicker/__tests__/datePicker.test.tsx b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4263e9f88196c464cfe720ed936e015e0fbdb2e0
--- /dev/null
+++ b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
@@ -0,0 +1,103 @@
+import { mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test } from "vitest";
+
+import LayDatePicker from "../index.vue";
+import { nextTick } from "vue";
+
+describe("LayDatePicker", () => {
+  afterEach(() => {
+    const popperDom = document.body.querySelector(".layui-popper");
+    if (popperDom) {
+      popperDom.remove();
+    }
+  });
+
+  test("modelValue", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "2024/10/01 10:00:00",
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    expect((component.props() as any).modelValue).toBe("2024/10/01 10:00:00");
+    expect((component.vm as any).currentYear).toBe(2024);
+    expect((component.vm as any).currentMonth).toBe(10 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("2024/10/01 00:00:00").getTime()
+    );
+  });
+
+  test("modelValue 修改", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "2024/10/01 10:00:00",
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    wrapper.setProps({
+      modelValue: "2024/10/02 10:00:00",
+    });
+    await nextTick();
+    expect((component.props() as any).modelValue).toBe("2024/10/02 10:00:00");
+    expect((component.vm as any).currentYear).toBe(2024);
+    expect((component.vm as any).currentMonth).toBe(10 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("2024/10/02 00:00:00").getTime()
+    );
+  });
+
+  test("modelValue 负数时间", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "1970/01/01 00:00:00",
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    expect((component.props() as any).modelValue).toBe("1970/01/01 00:00:00");
+    expect((component.vm as any).currentYear).toBe(1970);
+    expect((component.vm as any).currentMonth).toBe(1 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("1970/01/01 00:00:00").getTime()
+    );
+  });
+
+  test("timestamp 负数时间", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        timestamp: true,
+        modelValue: -1,
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    expect((component.vm as any).currentYear).toBe(1970);
+    expect((component.vm as any).currentMonth).toBe(1 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("1970/01/01 00:00:00").getTime()
+    );
+  });
+
+  test("format", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "2024/10/01 10:00:00",
+        format: "MM-dd",
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    expect((component.vm as any).currentYear).toBe(2024);
+    expect((component.vm as any).currentMonth).toBe(10 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("2024/10/01 00:00:00").getTime()
+    );
+  });
+});
diff --git a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..736e52f02dba5a142bcf1e69a3c534af0d5b67f8
--- /dev/null
+++ b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
@@ -0,0 +1,60 @@
+import { mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test } from "vitest";
+import { nextTick } from "vue";
+import { sleep } from "../../../test-utils";
+
+import LayDatePicker from "../index.vue";
+import LayDropdown from "../../dropdown/index.vue";
+import YearPanel from "../components/YearPanel.vue";
+import { getYears } from "../day";
+
+describe("YearPanel", () => {
+  afterEach(() => {
+    document.querySelectorAll(".layui-popper").forEach((el) => el.remove());
+  });
+
+  test("render", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "year",
+        modelValue: "2024/10/01 10:00:00",
+      },
+    });
+
+    const datePickerInstance = wrapper.findComponent(LayDatePicker);
+    const dropdownInstance = datePickerInstance.findComponent(LayDropdown);
+    await nextTick();
+    datePickerInstance.find(".layui-input").trigger("click");
+    await nextTick();
+    await sleep();
+    const yearPanelInstance = datePickerInstance.findComponent(YearPanel);
+    expect(dropdownInstance.exists()).toBe(true);
+    expect((dropdownInstance.vm as any).open).toBe(true);
+    expect(yearPanelInstance.findAll("li").length).toBe(getYears().length);
+  });
+
+  test("year 修改", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "year",
+        modelValue: "2024/10/01 10:00:00",
+      },
+    });
+
+    const datePickerInstance = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    datePickerInstance.find(".layui-input").trigger("click");
+    await nextTick();
+    await sleep();
+    const yearPanelInstance = datePickerInstance.findComponent(YearPanel);
+    expect(yearPanelInstance.exists()).toBe(true);
+    expect((yearPanelInstance.vm as any).Year).toBe(2024);
+
+    wrapper.setProps({
+      modelValue: "2023/10/01 10:00:00",
+    });
+    await nextTick();
+    // FIXME : 修改 modelValue 后，YearPanel 的 Year 属性没有更新
+    // expect((yearPanelInstance.vm as any).Year).toBe(2023);
+  });
+});
diff --git a/packages/component/component/datePicker/index.vue b/packages/component/component/datePicker/index.vue
index a3c3ec6e876fbd64ba5d89c5a2294c31b8d874f5..e804fd94c4c4d92a407615fc0ec83d81acc833eb 100644
--- a/packages/component/component/datePicker/index.vue
+++ b/packages/component/component/datePicker/index.vue
@@ -9,7 +9,6 @@
       :autoFitMinWidth="false"
       :contentClass="contentClass"
       :contentStyle="contentStyle"
-      updateAtScroll
     >
       <lay-input
         :name="name"
diff --git a/packages/component/component/datePickerV2/component/YearPanel.vue b/packages/component/component/datePickerV2/component/YearPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5c3efa950724dac805acfa7f72e1886178a7ff2f
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/YearPanel.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
diff --git a/packages/component/component/datePickerV2/component/common/commonBlock.vue b/packages/component/component/datePickerV2/component/common/commonBlock.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8bc75121ed5cd98c862a12b1440be6658dfbf3d5
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/commonBlock.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { CommonBlockProps } from "../interface";
+
+const props = withDefaults(defineProps<CommonBlockProps>(), {});
+
+const dateValue = "";
+const startPlaceholder = "";
+const endPlaceholder = "";
+
+const onChange = () => {};
+const handleClear = () => {};
+</script>
+
+<template>
+  <div :class="classes" :size="size">
+    <lay-dropdown
+      ref="dropdownRef"
+      :disabled="disabled"
+      :autoFitMinWidth="false"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle"
+    >
+      <lay-input
+        :name="name"
+        :readonly="readonly"
+        :placeholder="startPlaceholder"
+        :prefix-icon="prefixIcon"
+        :suffix-icon="suffixIcon"
+        :disabled="disabled"
+        v-model="dateValue"
+        v-if="!range"
+        @change="onChange"
+        @blur="$emit('blur')"
+        @focus="$emit('focus')"
+        :allow-clear="!disabled && allowClear"
+        :size="size"
+        @clear="handleClear"
+      >
+      </lay-input>
+      <div class="laydate-range-inputs" v-else>
+        <lay-input
+          :readonly="readonly"
+          :name="name"
+          v-model="dateValue[0]"
+          :placeholder="startPlaceholder"
+          :disabled="disabled"
+          @change="onChange"
+          @blur="$emit('blur')"
+          @focus="$emit('focus')"
+          class="start-input"
+          :size="size"
+        >
+        </lay-input>
+        <span class="range-separator">{{ rangeSeparator }}</span>
+        <lay-input
+          :readonly="readonly"
+          :name="name"
+          :allow-clear="!disabled && allowClear"
+          :placeholder="endPlaceholder"
+          v-model="dateValue[1]"
+          :disabled="disabled"
+          @change="onChange"
+          @blur="$emit('blur')"
+          @focus="$emit('focus')"
+          class="end-input"
+          :size="size"
+          @clear="handleClear"
+        >
+        </lay-input>
+      </div>
+      <template #content>
+        <slot></slot>
+      </template>
+    </lay-dropdown>
+  </div>
+</template>
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fe6cd3cce0c454ceb726f629ebd837db9c14c7e0
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -0,0 +1,17 @@
+import type { StyleValue } from "vue";
+import type { CommonSize, CommonClass } from "../../../types/common";
+
+export interface CommonBlockProps {
+  name: string;
+  classes: CommonClass;
+  size: CommonSize;
+  disabled: boolean;
+  allowClear: boolean;
+  range: boolean;
+  rangeSeparator: string;
+  readonly: boolean;
+  prefixIcon?: string;
+  suffixIcon?: string;
+  contentClass?: CommonClass;
+  contentStyle?: StyleValue;
+}
diff --git a/packages/component/component/datePickerV2/day.ts b/packages/component/component/datePickerV2/day.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9cadb13ab0cb4b04c1f1e4f8a39ec577ccf98a73
--- /dev/null
+++ b/packages/component/component/datePickerV2/day.ts
@@ -0,0 +1,111 @@
+/**
+ * 获取年份列表
+ * @param {Date | number} date 时间
+ * @param {Number} page 页数
+ * @param {Number} step 步进
+ */
+const getYears = (date?: Date | number, page = 15, step = 1) => {
+  const years = [];
+  const y = typeof date === "number" ? date : date?.getFullYear() ?? 1970;
+  console.log(y, page, step);
+  const r = (page % 2 ? page - 1 : page) / 2;
+  for (let i = y - r; i <= y + r; i += step) {
+    years.push(i);
+  }
+  return years;
+};
+
+/**
+ * 获取当前日期
+ */
+const getDate = (val = "") => {
+  if (val) {
+    return new Date(val);
+  } else {
+    return new Date();
+  }
+};
+
+/**
+ * 获取当前年份
+ */
+const getYear = (val = "") => {
+  return getDate(val).getFullYear();
+};
+
+/**
+ * 获取当前月份
+ */
+const getMonth = (val = "") => {
+  return getDate(val).getMonth();
+};
+
+const getDay = (val = "") => {
+  if (val) {
+    return new Date(getDate(val).toDateString()).getTime();
+  } else {
+    return -1;
+  }
+};
+
+/**
+ * 获取月份天数
+ *
+ * @param year
+ * @param month
+ */
+const getDayLength = (year: number, month: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+// 设置日期列表
+const setDateList = (year: number, month: number) => {
+  const curDays = getDayLength(year, month); // 当月天数
+  const prevDays = getDayLength(year, month - 1); // 上月天数
+  const curFirstDayWeek = new Date(year, month, 1).getDay(); // 当月第一天星期几
+  const list: any[] = [];
+  // 填充上月天数
+  for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
+    list.push({
+      day: i,
+      value: +new Date(year, month - 1, i),
+      isRange: false,
+      isSelected: false,
+      type: "prev",
+    });
+  }
+  // 填充当月天数
+  for (let i = 1; i <= curDays; i++) {
+    list.push({
+      day: i,
+      value: +new Date(year, month, i),
+      isRange: false,
+      isSelected: false,
+      type: "current",
+    });
+  }
+  // 填充下月天数
+  const nextDays = 7 - (list.length % 7);
+  if (nextDays !== 7) {
+    for (let i = 1; i <= nextDays; i++) {
+      list.push({
+        day: i,
+        value: +new Date(year, month + 1, i),
+        isRange: false,
+        isSelected: false,
+        type: "next",
+      });
+    }
+  }
+  return list;
+};
+
+export {
+  getDayLength,
+  getYears,
+  getDate,
+  getMonth,
+  getYear,
+  getDay,
+  setDateList,
+};
diff --git a/packages/component/component/datePickerV2/hook/useDateCommon.ts b/packages/component/component/datePickerV2/hook/useDateCommon.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a92d7bfa11def7a882a61910dc25c7b6cbc04ae7
--- /dev/null
+++ b/packages/component/component/datePickerV2/hook/useDateCommon.ts
@@ -0,0 +1,30 @@
+import type { DatePickerProps } from "../interface";
+import type { CommonBlockProps } from "../component/interface";
+
+import { computed } from "vue";
+
+export const useDateCommon = (props: DatePickerProps) => {
+  const commonBlockProps = computed<CommonBlockProps>(() => {
+    return {
+      name: props.name!,
+      classes: [
+        "layui-date-picker",
+        { "layui-date-range-picker": props.range },
+      ],
+      size: "md",
+      disabled: props.disabled!,
+      allowClear: props.allowClear!,
+      range: props.range!,
+      rangeSeparator: props.rangeSeparator!,
+      readonly: props.readonly!,
+      prefixIcon: props.prefixIcon,
+      suffixIcon: props.suffixIcon,
+      contentClass: props.contentClass!,
+      contentStyle: props.contentStyle!,
+    };
+  });
+
+  return {
+    commonBlockProps,
+  };
+};
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9cddde7f5eef458d64df55a7c15c1c0c1d732911
--- /dev/null
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -0,0 +1,59 @@
+import type { DatePickerProps, DatePickerEmits, TypeMap } from "../interface";
+
+import { computed } from "vue";
+// import dayjs from "dayjs";
+import YearPanel from "../component/YearPanel.vue";
+
+export const useDatePicker = (
+  props: DatePickerProps,
+  emits: DatePickerEmits
+) => {
+  const _modelValue = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(val) {
+      return emits("update:modelValue", val as string | Array<string>);
+    },
+  });
+
+  const _format = computed(() => {
+    return props.format ?? typeMap.value.format;
+  });
+
+  const _inputFormat = computed(() => {
+    return props.inputFormat ?? typeMap.value.format;
+  });
+
+  // 类型映射
+  const TYPE_MAP: TypeMap = {
+    date: { component: YearPanel, format: "YYYY-MM-DD" },
+    datetime: { component: YearPanel, format: "YYYY-MM-DD HH:mm:ss" },
+    year: { component: YearPanel, format: "YYYY" },
+    month: { component: YearPanel, format: "MM" },
+    time: { component: YearPanel, format: "HH:mm:ss" },
+    yearmonth: { component: YearPanel, format: "YYYY-MM" },
+  };
+
+  const renderComponentProps = computed<DatePickerProps>(() => {
+    return {
+      ...props,
+      format: _format.value,
+      inputFormat: _inputFormat.value,
+    };
+  });
+
+  const typeMap = computed(() => {
+    return TYPE_MAP[props.type!];
+  });
+
+  const RenderComponent = computed(() => {
+    return typeMap.value.component;
+  });
+
+  return {
+    _modelValue,
+    RenderComponent,
+    renderComponentProps,
+  };
+};
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..09c43cdc094cbbe97970502567d4407ec9c3f69e
--- /dev/null
+++ b/packages/component/component/datePickerV2/index.less
@@ -0,0 +1,647 @@
+@import "../dropdown/index.less";
+@import "../input/index.less";
+
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+@lg-width: 260px;
+@md-width: 220px;
+@sm-width: 180px;
+@xs-width: 140px;
+@lg-range-width: 520px;
+@md-range-width: 440px;
+@sm-range-width: 360px;
+@xs-range-width: 280px;
+
+.set-size(@size,@width) {
+  & {
+    width: @width;
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+  }
+}
+
+.layui-date-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-width);
+  }
+}
+.layui-date-range-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-range-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-range-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-range-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-range-width);
+  }
+}
+
+@font-face {
+  font-family: "laydate-icon";
+  src: url("./font/iconfont.eot");
+  src: url("./font/iconfont.eot#iefix") format("embedded-opentype"),
+    url("./font/iconfont.svg#iconfont") format("svg"),
+    url("./font/iconfont.woff") format("woff"),
+    url("./font/iconfont.ttf") format("truetype");
+}
+
+.laydate-icon {
+  font-family: "laydate-icon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html #layuicss-laydate {
+  display: none;
+  position: absolute;
+  width: 1989px;
+}
+
+/* 初始化 */
+.layui-laydate * {
+  margin: 0;
+  padding: 0;
+}
+
+/* 主体结构 */
+.layui-laydate,
+.layui-laydate * {
+  box-sizing: border-box;
+}
+.layui-laydate {
+  z-index: 66666666;
+  border-radius: var(--global-border-radius);
+  font-size: 14px;
+  -webkit-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+
+  .layui-laydate-year-control {
+    padding: 4px;
+  }
+}
+.layui-laydate-main {
+  width: 272px;
+}
+.layui-laydate-header *,
+.layui-laydate-content td,
+.layui-laydate-list li {
+  transition-duration: 0.3s;
+  -webkit-transition-duration: 0.3s;
+}
+
+/* 微微往下滑入 */
+@keyframes laydate-downbit {
+  0% {
+    opacity: 0.3;
+    transform: translate3d(0, -5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.layui-laydate {
+  animation-name: laydate-downbit;
+}
+.layui-laydate-static {
+  position: relative;
+  z-index: 0;
+  display: inline-block;
+  margin: 0;
+  -webkit-animation: none;
+  animation: none;
+}
+
+/* 展开年月列表时 */
+.laydate-ym-show .laydate-prev-m,
+.laydate-ym-show .laydate-next-m {
+  display: none !important;
+}
+.laydate-ym-show .laydate-prev-y,
+.laydate-ym-show .laydate-next-y {
+  display: inline-block !important;
+}
+.laydate-ym-show .laydate-set-ym span[lay-type="month"] {
+  display: none !important;
+}
+
+/* 展开时间列表时 */
+.laydate-time-show .layui-laydate-header .layui-icon,
+.laydate-time-show .laydate-set-ym span[lay-type="year"],
+.laydate-time-show .laydate-set-ym span[lay-type="month"] {
+  display: none !important;
+}
+
+/* 头部结构 */
+.layui-laydate-header {
+  position: relative;
+  line-height: 30px;
+  padding: 10px 70px 5px;
+}
+.layui-laydate-header * {
+  vertical-align: bottom;
+}
+.layui-laydate-header i {
+  position: absolute;
+  top: 10px;
+  padding: 0 5px;
+  color: #999;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.layui-laydate-header i.laydate-prev-y {
+  left: 15px;
+}
+.layui-laydate-header i.laydate-prev-m {
+  left: 45px;
+}
+.layui-laydate-header i.laydate-next-y {
+  right: 15px;
+}
+.layui-laydate-header i.laydate-next-m {
+  right: 45px;
+}
+.layui-laydate-year-panel-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 14px 5px;
+  line-height: 30px;
+  border-bottom: 1px solid #e2e2e2;
+
+  .laydate-set-ym {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    i {
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+.laydate-set-ym {
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.laydate-set-ym span {
+  padding: 0 10px;
+  cursor: pointer;
+}
+.laydate-time-text {
+  cursor: default !important;
+}
+
+/* 主体结构 */
+.layui-laydate-content {
+  position: relative;
+  padding: 10px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.layui-laydate-content table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.layui-laydate-content th,
+.layui-laydate-content td {
+  width: 36px;
+  height: 30px;
+  padding: 5px;
+  text-align: center !important;
+}
+.layui-laydate-content th {
+  font-weight: 400;
+}
+.layui-laydate-content td {
+  position: relative;
+  cursor: pointer;
+}
+.laydate-day-mark {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  line-height: 30px;
+  font-size: 12px;
+  overflow: hidden;
+}
+.laydate-day-mark::after {
+  position: absolute;
+  content: "";
+  right: 2px;
+  top: 2px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+}
+
+/* 底部结构 */
+.layui-laydate-footer {
+  position: relative;
+  height: 46px;
+  line-height: 26px;
+  padding: 10px;
+}
+
+.layui-laydate-footer .laydate-footer-btns span {
+  border-radius: 0px;
+}
+
+.layui-laydate-footer .laydate-footer-btns span:first-child {
+  border-top-left-radius: var(--global-border-radius);
+  border-bottom-left-radius: var(--global-border-radius);
+}
+
+.layui-laydate-footer .laydate-footer-btns span:last-child {
+  border-top-right-radius: var(--global-border-radius);
+  border-bottom-right-radius: var(--global-border-radius);
+}
+
+.layui-laydate-footer span {
+  display: inline-block;
+  vertical-align: top;
+  height: 26px;
+  line-height: 24px;
+  padding: 0 10px;
+  border: 1px solid #c9c9c9;
+  border-radius: 2px;
+  background-color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.3s;
+}
+.layui-laydate-footer span:hover {
+  color: var(--global-primary-color);
+}
+.layui-laydate-footer span.layui-laydate-preview {
+  cursor: default;
+  border-color: transparent !important;
+}
+.layui-laydate-footer span.layui-laydate-preview:hover {
+  color: #666;
+}
+.layui-laydate-footer span:first-child.layui-laydate-preview {
+  padding-left: 0;
+}
+.laydate-footer-btns {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.laydate-footer-btns span {
+  margin: 0 0 0 -1px;
+}
+
+/* 年月列表 */
+.layui-laydate-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.layui-laydate-list > li {
+  position: relative;
+  display: inline-block;
+  width: 33.3%;
+  height: 36px;
+  line-height: 36px;
+  margin: 3px 0;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+.laydate-month-list > li {
+  width: 25%;
+  margin: 17px 0;
+}
+.laydate-time-list > li {
+  height: 100%;
+  margin: 0;
+  line-height: normal;
+  cursor: default;
+}
+.laydate-time-list p {
+  position: relative;
+  top: -4px;
+  line-height: 29px;
+}
+.laydate-time-list ol {
+  height: 181px;
+  overflow: hidden;
+}
+.laydate-time-list > li:hover ol {
+  overflow-y: auto;
+}
+
+.laydate-time-list ol li {
+  width: 130%;
+  padding-left: 4px;
+  height: 30px;
+  line-height: 30px;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* 提示 */
+.layui-laydate-hint {
+  top: 115px;
+  left: 50%;
+  width: 250px;
+  margin-left: -125px;
+  line-height: 20px;
+  padding: 15px;
+  text-align: center;
+  font-size: 12px;
+  color: #ff5722;
+}
+
+/* 双日历 */
+.layui-laydate-range {
+  min-width: 546px;
+}
+.layui-laydate-range .layui-laydate-main {
+  display: inline-block;
+  vertical-align: middle;
+}
+.layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
+.layui-laydate-range .laydate-main-list-1 .layui-laydate-content {
+  border-left: 1px solid #e2e2e2;
+}
+
+/* 默认简约主题 */
+.layui-laydate,
+.layui-laydate-hint {
+  background-color: #fff;
+  color: #666;
+}
+.layui-laydate-header {
+  border-bottom: 1px solid #e2e2e2;
+}
+.layui-laydate-header i:hover,
+.layui-laydate-header span:hover {
+  color: #5fb878;
+}
+.layui-laydate-content {
+  border-top: none 0;
+  border-bottom: none 0;
+}
+.layui-laydate-content th {
+  color: #333;
+}
+.layui-laydate-content td {
+  color: #666;
+}
+.layui-laydate-content td.laydate-selected {
+  background-color: #b5fff8;
+}
+.laydate-selected:hover {
+  background-color: #00f7de !important;
+}
+.layui-laydate-content td:hover,
+.layui-laydate-list li:hover {
+  background-color: #eee;
+  color: #333;
+}
+.laydate-time-list li ol {
+  margin: 0;
+  padding: 0;
+  border: 1px solid #e2e2e2;
+}
+.laydate-time-list li:first-child ol {
+  border-left-width: 1px;
+}
+.laydate-time-list > li:hover {
+  background: none;
+}
+.layui-laydate-content .laydate-day-prev,
+.layui-laydate-content .laydate-day-next {
+  color: #d2d2d2;
+}
+.laydate-selected.laydate-day-prev,
+.laydate-selected.laydate-day-next {
+  background-color: #f8f8f8 !important;
+}
+.layui-laydate-footer {
+  border-top: 1px solid #e2e2e2;
+}
+.layui-laydate-hint {
+  color: #ff5722;
+}
+.laydate-day-mark::after {
+  background-color: #5fb878;
+}
+.layui-laydate-content td.layui-this .laydate-day-mark::after {
+  display: none;
+}
+.layui-laydate-footer span[lay-type="date"] {
+  color: #5fb878;
+}
+.layui-laydate .layui-this {
+  background-color: var(--global-primary-color) !important;
+  color: #fff !important;
+}
+
+.layui-laydate .laydate-disabled,
+.layui-laydate .laydate-disabled:hover {
+  background: none !important;
+  color: #d2d2d2 !important;
+  cursor: not-allowed !important;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+/* 墨绿/自定义背景色主题 */
+.laydate-theme-molv {
+  border: none;
+}
+.laydate-theme-molv.layui-laydate-range {
+  width: 548px;
+}
+.laydate-theme-molv .layui-laydate-main {
+  width: 274px;
+}
+.laydate-theme-molv .layui-laydate-header {
+  border: none;
+  background-color: #009688;
+}
+.laydate-theme-molv .layui-laydate-header i,
+.laydate-theme-molv .layui-laydate-header span {
+  color: #f6f6f6;
+}
+.laydate-theme-molv .layui-laydate-header i:hover,
+.laydate-theme-molv .layui-laydate-header span:hover {
+  color: #fff;
+}
+.laydate-theme-molv .layui-laydate-content {
+  border: 1px solid #e2e2e2;
+  border-top: none;
+  border-bottom: none;
+}
+.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content {
+  border-left: none;
+}
+.laydate-theme-molv .layui-laydate-footer {
+  border: 1px solid #e2e2e2;
+}
+
+/* 格子主题 */
+.laydate-theme-grid .layui-laydate-content td,
+.laydate-theme-grid .layui-laydate-content thead,
+.laydate-theme-grid .laydate-year-list > li,
+.laydate-theme-grid .laydate-month-list > li {
+  border: 1px solid #e2e2e2;
+}
+.laydate-theme-grid .laydate-selected,
+.laydate-theme-grid .laydate-selected:hover {
+  background-color: #f2f2f2 !important;
+  color: #009688 !important;
+}
+.laydate-theme-grid .laydate-selected.laydate-day-prev,
+.laydate-theme-grid .laydate-selected.laydate-day-next {
+  color: #d2d2d2 !important;
+}
+.laydate-theme-grid .laydate-year-list,
+.laydate-theme-grid .laydate-month-list {
+  margin: 1px 0 0 1px;
+}
+.laydate-theme-grid .laydate-year-list > li,
+.laydate-theme-grid .laydate-month-list > li {
+  margin: 0 -1px -1px 0;
+}
+.laydate-theme-grid .laydate-year-list > li {
+  height: 43px;
+  line-height: 43px;
+}
+.laydate-theme-grid .laydate-month-list > li {
+  height: 71px;
+  line-height: 71px;
+}
+.laydate-range-hover {
+  background-color: var(--global-neutral-color-2) !important;
+}
+.layui-laydate-content .layui-disabled:hover {
+  background-color: transparent !important;
+}
+
+.laydate-range-inputs {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  border-width: 1px;
+  box-sizing: border-box;
+  width: 100%;
+  border-style: solid;
+  overflow: hidden;
+  display: inline-flex;
+  border-color: var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  &:hover {
+    border-color: #d2d2d2;
+  }
+  .range-separator {
+    margin: 0 5px;
+    color: var(--global-neutral-color-8);
+    background-color: transparent;
+  }
+  .layui-input-wrapper {
+    border: none;
+    box-sizing: border-box;
+    input {
+      text-align: center;
+      padding: 0;
+    }
+  }
+  .layui-input {
+    border: none;
+  }
+}
+.layui-laydate-range {
+  .laydate-set-ym {
+    overflow: visible;
+    white-space: nowrap;
+  }
+  .laydate-set-ym .layui-dropdown {
+    width: auto !important;
+  }
+
+  .time-panel {
+    .layui-laydate-main {
+      width: 272px;
+      display: unset !important;
+    }
+    .layui-laydate-preview {
+      display: none;
+    }
+  }
+  .layui-laydate-content {
+    .laydate-year-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  .layui-laydate-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.layui-laydate-range-datetime {
+  .layui-laydate-main {
+    width: 340px;
+  }
+}
+.layui-laydate-current {
+  background-color: var(--global-neutral-color-3);
+}
+
+.laydate-time-list > li:hover ol::-webkit-scrollbar {
+  width: 0px;
+}
+.layui-laydate-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.layui-laydate-content::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #eeeeee;
+}
+.layui-laydate-content::-webkit-scrollbar-thumb:hover {
+  background-color: #dddddd;
+}
diff --git a/packages/component/component/datePickerV2/index.ts b/packages/component/component/datePickerV2/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f747fde180ef2ffe8b1f09f19e8d431a4704449f
--- /dev/null
+++ b/packages/component/component/datePickerV2/index.ts
@@ -0,0 +1,5 @@
+import { withInstall } from "../../utils";
+import Component from "./index.vue";
+
+const component = withInstall(Component);
+export default component;
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3ee038cbe6774cd8eb3492be588317ea74eb9093
--- /dev/null
+++ b/packages/component/component/datePickerV2/index.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type {
+  DatePickerProps as _DatePickerProps,
+  DatePickerType,
+  DatePickerEmits,
+} from "./interface";
+
+import { useDateCommon } from "./hook/useDateCommon";
+import { useDatePicker } from "./hook/useDatePicker";
+
+import CommonBlock from "./component/common/commonBlock.vue";
+
+export type DatePickerProps = _DatePickerProps;
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  modelValue: "",
+  type: "year",
+  disabled: false,
+  readonly: false,
+  allowClear: false,
+  simple: false,
+  range: false,
+  rangeSeparator: "至",
+  prefixIcon: "layui-icon-date",
+  suffixIcon: "",
+  timestamp: false,
+  format: "",
+  yearPage: 15,
+  yearStep: 1,
+});
+
+const emits = defineEmits<DatePickerEmits>();
+
+const { commonBlockProps } = useDateCommon(props);
+const { _modelValue, RenderComponent, renderComponentProps } = useDatePicker(
+  props,
+  emits
+);
+
+defineOptions({
+  name: "LayDatePickerV2",
+});
+</script>
+
+<template>
+  <CommonBlock v-bind="commonBlockProps">
+    <RenderComponent v-bind="renderComponentProps" v-model="_modelValue" />
+  </CommonBlock>
+</template>
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cda39b64a0b8f0a0bcfccc09ee896a9b956370a0
--- /dev/null
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -0,0 +1,84 @@
+import type { Ref, StyleValue, Component, DefineComponent } from "vue";
+import type { CommonSize, CommonClass } from "../../types/common";
+
+export type DatePickerType =
+  | "date"
+  | "datetime"
+  | "year"
+  | "month"
+  | "time"
+  | "yearmonth";
+
+export type TypeMap = {
+  [k in DatePickerType]: {
+    component: Component;
+    format: string;
+  };
+};
+
+export type DatePickerModelValueSingleType = number | string | Date;
+
+export interface DatePickerProps {
+  name?: string;
+  modelValue?:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>;
+  type?: DatePickerType;
+  disabled?: boolean;
+  readonly?: boolean;
+  placeholder?: string | string[];
+  allowClear?: boolean;
+  simple?: boolean;
+  max?: string;
+  min?: string;
+  range?: boolean;
+  rangeSeparator?: string;
+  size?: CommonSize;
+  prefixIcon?: string;
+  suffixIcon?: string;
+  timestamp?: boolean;
+  format?: string;
+  inputFormat?: string;
+  defaultTime?: string | string[];
+  contentStyle?: StyleValue;
+  contentClass?: CommonClass;
+  yearPage?: number;
+  yearStep?: number;
+}
+
+export type DatePickerEmits = {
+  (e: "update:modelValue", value: string | Array<string>): void;
+  (e: "change", value: string | Array<string>): void;
+  (e: "blur", event: Event): void;
+  (e: "focus", event: Event): void;
+  (e: "clear"): void;
+};
+
+export type provideType = {
+  currentYear: Ref;
+  currentMonth: Ref;
+  currentDay: Ref;
+  dateValue: Ref;
+  hms: Ref;
+  type: string;
+  showPanel: Ref;
+  clear: Function;
+  now: Function;
+  ok: Function;
+  range: boolean;
+  rangeValue: {
+    first: string;
+    last: string;
+    hover: string;
+    firstTime: { hh: number; mm: number; ss: number };
+    lastTime: { hh: number; mm: number; ss: number };
+  };
+  rangeSeparator: string;
+  simple: boolean;
+  timestamp: boolean;
+  max: Ref<string>;
+  min: Ref<string>;
+  defaultTime: string | string[];
+  yearPage: Ref<number>;
+  yearStep: Ref<number>;
+};
diff --git a/packages/component/component/dropdown/index.less b/packages/component/component/dropdown/index.less
index ceae69473531623d524ef62935adcde9f8cabde5..d2ae20301d31ce1af7a47f710ee7084f77c37c32 100644
--- a/packages/component/component/dropdown/index.less
+++ b/packages/component/component/dropdown/index.less
@@ -1,64 +1,64 @@
-:root {
-  --dropdown-content-border-radius: var(--global-border-radius);
-}
-
-.layui-dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.layui-dropdown-content {
-  position: absolute;
-  z-index: 99999999;
-  background-color: #fff;
-  box-sizing: border-box;
-  border: 1px solid #e4e7ed;
-  border-radius: var(--dropdown-content-border-radius);
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
-}
-
-.layui-dropdown-content > .layui-dropdown-menu {
-  margin: 5px 0;
-}
-
-.layui-dropdown-content .layui-menu {
-  position: relative;
-  background-color: #fff;
-}
-
-.layui-dropdown-content .layui-menu li,
-.layui-dropdown-content .layui-menu-body-title a {
-  padding: 5px 15px;
-}
-
-.layui-dropdown-content .layui-menu li {
-  position: relative;
-  display: flex;
-  margin: 1px 0;
-  line-height: 26px;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 14px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.layui-dropdown-content .layui-menu li:hover {
-  background-color: var(--global-neutral-color-2);
-}
-
-.layui-dropdown-content .layui-menu-body-title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.layui-dropdown-menu-prefix{
-  margin-right: 8px;
-}
-.layui-dropdown-menu-suffix{
-  margin-left: 15px;
-}
-
-.layui-dropdown-content .layui-menu li.layui-disabled:hover {
-  background-color: inherit;
-}
+:root {
+  --dropdown-content-border-radius: var(--global-border-radius);
+}
+
+.layui-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.layui-dropdown-content {
+  position: absolute;
+  z-index: 99999999;
+  background-color: #fff;
+  box-sizing: border-box;
+  border: 1px solid #e4e7ed;
+  border-radius: var(--dropdown-content-border-radius);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+}
+
+.layui-dropdown-content > .layui-dropdown-menu {
+  margin: 5px 0;
+}
+
+.layui-dropdown-content .layui-menu {
+  position: relative;
+  background-color: #fff;
+}
+
+.layui-dropdown-content .layui-menu li,
+.layui-dropdown-content .layui-menu-body-title a {
+  padding: 5px 15px;
+}
+
+.layui-dropdown-content .layui-menu li {
+  position: relative;
+  display: flex;
+  margin: 1px 0;
+  line-height: 26px;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.layui-dropdown-content .layui-menu li:hover {
+  background-color: var(--global-neutral-color-2);
+}
+
+.layui-dropdown-content .layui-menu-body-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.layui-dropdown-menu-prefix{
+  margin-right: 8px;
+}
+.layui-dropdown-menu-suffix{
+  margin-left: 15px;
+}
+
+.layui-dropdown-content .layui-menu li.layui-disabled:hover {
+  background-color: inherit;
+}
diff --git a/packages/component/component/dropdown/index.vue b/packages/component/component/dropdown/index.vue
index 120cf3f8ee91bccbd66055ebd721dfa92bab85b8..3964fa6259591f0d775dd5f7da36e1d9dda58ad0 100644
--- a/packages/component/component/dropdown/index.vue
+++ b/packages/component/component/dropdown/index.vue
@@ -1,664 +1,250 @@
 <script setup lang="ts">
 import "./index.less";
-import {
-  ComputedRef,
-  CSSProperties,
-  h,
-  inject,
-  reactive,
-  Ref,
-  toRefs,
-  useSlots,
-  Fragment,
-  cloneVNode,
-  useAttrs,
-  StyleValue,
-} from "vue";
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-  shallowRef,
-  watch,
-} from "vue";
-import {
-  onClickOutside,
-  useResizeObserver,
-  useThrottleFn,
-  useWindowSize,
-} from "@vueuse/core";
-import {
-  dropdownInjectionKey,
-  DropdownPlacement,
-  ElementScrollRect,
+import type { CSSProperties, TeleportProps } from "vue";
+import type {
+  ContentProps,
+  TriggerProps,
+  ContentComponentInstance,
+} from "../popper/types";
+import type {
+  DropdownProps as _DropdownProps,
+  DropdownEmits,
+  pointType,
   DropdownContext,
 } from "./interface";
-import TeleportWrapper from "../_components/teleportWrapper.vue";
-import { useFirstElement, getScrollElements, transformPlacement } from "./util";
-import LayRender from "../_components/render";
-
-export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
-
-export interface DropdownProps {
-  visible?: boolean;
-  trigger?: DropdownTrigger | DropdownTrigger[];
-  placement?: DropdownPlacement;
-  disabled?: boolean;
-  disabledTeleport?: boolean;
-  autoFitPosition?: boolean;
-  autoFitWidth?: boolean;
-  autoFitMinWidth?: boolean;
-  updateAtScroll?: boolean;
-  autoFixPosition?: boolean;
-  clickToClose?: boolean;
-  blurToClose?: boolean;
-  clickOutsideToClose?: boolean;
-  contentOffset?: number;
-  mouseEnterDelay?: number;
-  mouseLeaveDelay?: number;
-  focusDelay?: number;
-  alignPoint?: boolean;
-  contentClass?: string | Array<string | object> | object;
-  contentStyle?: StyleValue;
-  popupContainer?: string | undefined;
-}
+import type { Middlewares } from "../popper/usePopper/index";
+
+import { ref, provide, computed, nextTick, watch, reactive, inject } from "vue";
+import Trigger from "../popper/component/trigger.vue";
+import Content from "../popper/component/content.vue";
+import { POPPER_INJECTION_KEY } from "../popper/utils";
+import { flip, hide, offset, shift } from "../popper/usePopper/index";
+import { DROPDOWN_INJECTION_KEY } from "./interface";
+
+import useDelayTrigger from "../popper/hook/useDelayTrigger";
+import { isArray } from "../../utils";
+import { pointMiddleware } from "./utils";
 
 defineOptions({
   name: "LayDropdown",
-  inheritAttrs: false,
 });
 
+export type DropdownProps = _DropdownProps;
+
 const props = withDefaults(defineProps<DropdownProps>(), {
   visible: false,
   trigger: "click",
-  disabled: false,
-  disabledTeleport: false,
   placement: "bottom-start",
   autoFitPosition: true,
-  autoFitMinWidth: true,
   autoFitWidth: false,
-  updateAtScroll: false,
-  autoFixPosition: true,
+  autoFitMinWidth: true,
   clickToClose: true,
   blurToClose: true,
   clickOutsideToClose: true,
-  contentOffset: 2,
+  contentOffset: "2px",
   mouseEnterDelay: 150,
   mouseLeaveDelay: 150,
   focusDelay: 150,
-  alignPoint: false,
-  popupContainer: "body",
 });
 
-const emit = defineEmits(["show", "hide"]);
+const emits = defineEmits<DropdownEmits>();
 
-const slots = useSlots();
-const attrs = useAttrs();
-const childrenRefs = new Set<Ref<HTMLElement>>();
-const dropdownCtx = inject<DropdownContext | undefined>(
-  dropdownInjectionKey,
-  undefined
-);
-const { children, firstElement: dropdownRef } = useFirstElement();
-const contentRef = shallowRef<HTMLElement | undefined>();
-const contentStyle = ref<CSSProperties>({});
-const { width: windowWidth, height: windowHeight } = useWindowSize();
-const mousePosition = reactive({
-  x: 0,
-  y: 0,
+const _trigger = computed(() => {
+  return isArray(props.trigger) ? props.trigger : [props.trigger];
 });
-const { x: mouseLeft, y: mouseTop } = toRefs(mousePosition);
-const openState = ref(false);
-let scrollElements: HTMLElement[] | undefined;
-
-const containerRef = computed(() =>
-  props.popupContainer
-    ? document.querySelector<HTMLElement>(props.popupContainer) ?? document.body
-    : dropdownRef.value
-) as ComputedRef<HTMLElement>;
-
-const triggerMethods = computed(() =>
-  ([] as Array<DropdownTrigger>).concat(props.trigger)
-);
 
-const computedPlacement = computed(() => {
-  return transformPlacement(props.placement);
+const _teleportProps = computed<TeleportProps>(() => {
+  return {
+    to: props.teleportProps?.to || "body",
+    disabled: props.teleportProps?.disabled ?? false,
+  };
 });
 
-let delayTimer = 0;
-
-const cleanDelayTimer = () => {
-  if (delayTimer) {
-    window.clearTimeout(delayTimer);
-    delayTimer = 0;
-  }
-};
+const open = ref(props.visible);
 
-const show = (delay?: number): void => {
-  if (props.disabled == false) {
-    changeVisible(true, delay);
-    emit("show");
-  }
-};
+const TriggerRef = ref<HTMLElement | null>(null);
 
-const hide = (delay?: number): void => {
-  changeVisible(false, delay);
-  emit("hide");
-};
-
-const toggle = (): void => {
-  if (props.disabled == false)
-    if (openState.value) {
-      hide();
-    } else {
-      show();
-    }
-};
-
-const changeVisible = (visible: boolean, delay?: number) => {
-  if (visible === openState.value && delayTimer === 0) {
-    return;
-  }
-  const update = () => {
-    openState.value = visible;
-    nextTick(() => {
-      updateContentStyle();
-    });
+const customEvents = computed(() => {
+  return {
+    click: (e: Event) => {
+      if (!_trigger.value.includes("click")) return;
+      if (open.value && !props.clickToClose) return;
+      if (props.alignPoint) setPoint(e as PointerEvent);
+      toggle();
+    },
+    contextmenu: (e: Event) => {
+      if (!_trigger.value.includes("contextMenu")) return;
+      if (open.value && !props.clickToClose) return;
+      if (props.alignPoint) setPoint(e as PointerEvent);
+
+      e.preventDefault();
+      toggle();
+    },
+    focusout: () => {
+      if (!_trigger.value.includes("focus") || !props.blurToClose) return;
+      onHidden();
+    },
   };
+});
 
-  if (delay) {
-    cleanDelayTimer();
-    if (visible !== openState.value) {
-      delayTimer = window.setTimeout(update, delay);
-    }
-  } else {
-    update();
-  }
-};
+const point = reactive<pointType>({
+  x: 0,
+  y: 0,
+});
 
-const getElementScrollRect = (element: HTMLElement, containerRect: DOMRect) => {
-  if (element) {
-    const boundingRect = element.getBoundingClientRect();
-    return {
-      scrollTop: boundingRect.top - containerRect.top,
-      scrollBottom: boundingRect.bottom - containerRect.top,
-      scrollLeft: boundingRect.left - containerRect.left,
-      scrollRight: boundingRect.right - containerRect.left,
-      bottom: boundingRect.bottom,
-      height: boundingRect.height,
-      right: boundingRect.right,
-      left: boundingRect.left,
-      width: boundingRect.width,
-      top: boundingRect.top,
-    };
-  }
-  return {} as ElementScrollRect;
+const setPoint = (e: PointerEvent) => {
+  point.x = e.pageX;
+  point.y = e.pageY;
 };
 
-const getTriggerRect = () => {
+const triggerProps = computed<TriggerProps>(() => {
   return {
-    top: mouseTop.value,
-    bottom: mouseTop.value,
-    left: mouseLeft.value,
-    right: mouseLeft.value,
-    scrollTop: mouseTop.value,
-    scrollBottom: mouseTop.value,
-    scrollLeft: mouseLeft.value,
-    scrollRight: mouseLeft.value,
-    width: 0,
-    height: 0,
+    trigger: _trigger.value,
+    customEvents: customEvents.value,
   };
-};
+});
 
-const updateContentStyle = () => {
-  if (!containerRef.value || !dropdownRef.value || !contentRef.value) {
-    return;
-  }
+const _contentStyle = computed(() => {
+  const style: CSSProperties = {};
 
-  const containerRect = containerRef.value.getBoundingClientRect();
-  const triggerRect = props.alignPoint
-    ? getTriggerRect()
-    : getElementScrollRect(dropdownRef.value, containerRect);
-  const contentRect = getElementScrollRect(contentRef.value, containerRect);
-  const { style } = getContentStyle(
-    computedPlacement.value,
-    triggerRect,
-    contentRect
-  );
+  const width = props.alignPoint ? 0 : TriggerRef.value?.offsetWidth || 0;
 
   if (props.autoFitMinWidth) {
-    style.minWidth = `${triggerRect.width}px`;
-  }
-  if (props.autoFitWidth) {
-    style.width = `${triggerRect.width}px`;
-  }
-  contentStyle.value = style;
-
-  if (props.autoFitPosition) {
-    nextTick(() => {
-      const triggerRect = props.alignPoint
-        ? getTriggerRect()
-        : getElementScrollRect(dropdownRef.value as HTMLElement, containerRect);
-      const contentRect = getElementScrollRect(
-        contentRef.value as HTMLElement,
-        containerRect
-      );
-      let { top, left } = style;
-      top = Number(top.toString().replace("px", ""));
-      left = Number(left.toString().replace("px", ""));
-      const { top: fitTop, left: fitLeft } = getFitPlacement(
-        top,
-        left,
-        computedPlacement.value,
-        triggerRect,
-        contentRect
-      );
-      style.top = `${fitTop}px`;
-      style.left = `${fitLeft}px`;
-      contentStyle.value = {
-        ...style,
-      };
-    });
+    style.minWidth = `${width}px`;
   }
-};
 
-const updateMousePosition = (e: MouseEvent) => {
-  if (props.alignPoint) {
-    const { pageX, pageY } = e;
-    mousePosition.x = pageX;
-    mousePosition.y = pageY;
+  if (props.autoFitWidth) {
+    style.width = `${width}px`;
   }
-};
 
-const getContentStyle = (
-  placement: DropdownPlacement,
-  triggerRect: ElementScrollRect,
-  contentRect: ElementScrollRect,
-  {
-    customStyle = {},
-  }: {
-    customStyle?: CSSProperties;
-  } = {}
-) => {
-  let { top, left } = getContentOffset(placement, triggerRect, contentRect);
-  const style = {
-    top: `${top}px`,
-    left: `${left}px`,
-    ...customStyle,
-  };
-  return {
-    style,
-  };
-};
+  return style;
+});
 
-const getPosition = (placement: DropdownPlacement) => {
-  if (["top", "top-start", "top-end"].includes(placement)) {
-    return "top";
-  }
-  if (["bottom", "bottom-start", "bottom-end"].includes(placement)) {
-    return "bottom";
-  }
-  if (["left", "left-start", "left-end"].includes(placement)) {
-    return "left";
-  }
-  if (["right", "right-start", "right-end"].includes(placement)) {
-    return "right";
-  }
-  return "bottom";
-};
+const offsetValue = computed(() => {
+  return Number(`${props.contentOffset}`.replace("px", "") ?? 0);
+});
 
-const getFitPlacement = (
-  top: number,
-  left: number,
-  placement: DropdownPlacement,
-  triggerRect: ElementScrollRect,
-  contentRect: ElementScrollRect
-) => {
-  // FIXME 反转后仍溢出的场景
-  const position = getPosition(placement);
-  if (["top", "bottom"].includes(position)) {
-    // 溢出屏幕底部
-    if (contentRect.bottom > windowHeight.value) {
-      top = triggerRect.scrollTop - contentRect.height - props.contentOffset;
-    }
-    // 溢出屏幕顶部
-    if (contentRect.top < 0) {
-      top = triggerRect.scrollBottom + props.contentOffset;
-    }
-    // 溢出屏幕左边
-    if (contentRect.left < 0) {
-      left = left + (0 - contentRect.left);
-    }
-    // 溢出屏幕右边
-    if (contentRect.right > windowWidth.value) {
-      left = left - (contentRect.right - windowWidth.value);
-    }
-  }
-  if (["left", "right"].includes(position)) {
-    // 溢出屏幕底部
-    if (contentRect.bottom > windowHeight.value) {
-      top = top - (contentRect.bottom - windowHeight.value);
-    }
-    // 溢出屏幕顶部
-    if (contentRect.top < 0) {
-      top = top + (0 - contentRect.top);
-    }
-    // 溢出屏幕左边
-    if (contentRect.left < 0) {
-      left = triggerRect.scrollRight + props.contentOffset;
-    }
-    // 溢出屏幕右边
-    if (contentRect.right > windowWidth.value) {
-      left = triggerRect.scrollLeft - contentRect.width - props.contentOffset;
-    }
-  }
+const middlewares = computed(() => {
+  return [
+    offset(offsetValue.value),
+    shift(),
+    props.autoFitPosition && flip(),
+    props.alignPoint && pointMiddleware(point),
+    hide(),
+  ].filter(Boolean) as Middlewares;
+});
 
+const contentProps = computed<ContentProps>(() => {
   return {
-    top,
-    left,
+    modelValue: open.value,
+    trigger: _trigger.value,
+    placement: props.placement,
+    disabled: props.disabled,
+    enterable: true,
+    popperClass: [
+      "layui-anim-upbit",
+      "layui-dropdown-content",
+      props.contentClass,
+    ],
+    popperStyle: [props.contentStyle, _contentStyle.value],
+    clickOutsideToClose: props.clickOutsideToClose,
+    middlewares: middlewares.value,
+    teleportProps: _teleportProps.value,
   };
-};
+});
 
-const getContentOffset = (
-  placement: DropdownPlacement,
-  triggerRect: ElementScrollRect,
-  contentRect: ElementScrollRect
-) => {
-  switch (placement) {
-    case "top":
-      return {
-        top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
-        left:
-          triggerRect.scrollLeft +
-          Math.round((triggerRect.width - contentRect.width) / 2),
-      };
-    case "top-start":
-      return {
-        top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
-        left: triggerRect.scrollLeft,
-      };
-    case "top-end":
-      return {
-        top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
-        left: triggerRect.scrollRight - contentRect.width,
-      };
-    case "bottom":
-      return {
-        top: triggerRect.scrollBottom + props.contentOffset,
-        left:
-          triggerRect.scrollLeft +
-          Math.round((triggerRect.width - contentRect.width) / 2),
-      };
-    case "bottom-start":
-      return {
-        top: triggerRect.scrollBottom + props.contentOffset,
-        left: triggerRect.scrollLeft,
-      };
-    case "bottom-end":
-      return {
-        top: triggerRect.scrollBottom + props.contentOffset,
-        left: triggerRect.scrollRight - contentRect.width,
-      };
-    case "right":
-      return {
-        top:
-          triggerRect.scrollTop +
-          Math.round((triggerRect.height - contentRect.height) / 2),
-        left: triggerRect.scrollRight + props.contentOffset,
-      };
-    case "right-start":
-      return {
-        top: triggerRect.scrollTop,
-        left: triggerRect.scrollRight + props.contentOffset,
-      };
-    case "right-end":
-      return {
-        top: triggerRect.scrollBottom - contentRect.height,
-        left: triggerRect.scrollRight + props.contentOffset,
-      };
-    case "left":
-      return {
-        top:
-          triggerRect.scrollTop +
-          Math.round((triggerRect.height - contentRect.height) / 2),
-        left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,
-      };
-    case "left-start":
-      return {
-        top: triggerRect.scrollTop,
-        left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,
-      };
-    case "left-end":
-      return {
-        top: triggerRect.scrollBottom - contentRect.height,
-        left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,
-      };
-    default:
-      return {
-        left: 0,
-        top: 0,
-      };
-  }
+const show = () => {
+  if (props.disabled) return;
+  open.value = true;
 };
 
-const handleScroll = useThrottleFn(() => {
-  if (openState.value) {
-    updateContentStyle();
-  }
-}, 10);
-
-const handleClick = (e: MouseEvent) => {
-  if (props.disabled || (openState.value && !props.clickToClose)) {
-    return;
-  }
-  if (triggerMethods.value.includes("click")) {
-    updateMousePosition(e);
-    toggle();
-  }
+const hidden = () => {
+  open.value = false;
 };
 
-const handleContextMenuClick = (e: MouseEvent) => {
-  if (props.disabled || (openState.value && !props.clickToClose)) {
-    return;
-  }
-  if (triggerMethods.value.includes("contextMenu")) {
-    e.preventDefault();
-    if (props.alignPoint) {
-      hide();
+watch(
+  () => open.value,
+  (newVal) => {
+    if (newVal) {
+      emits("show", newVal);
+    } else {
+      emits("hide", newVal);
     }
-    updateMousePosition(e);
-    toggle();
-  }
-};
-
-const handleMouseEnter = (e: MouseEvent) => {
-  if (props.disabled || !triggerMethods.value.includes("hover")) {
-    return;
   }
-  show(props.mouseEnterDelay);
-};
+);
 
-const handleMouseEnterWithContext = (e: MouseEvent) => {
-  if (!props.popupContainer) {
-    return;
-  }
-  dropdownCtx?.onMouseenter(e);
-  handleMouseEnter(e);
-};
+const showAfter = computed(() => {
+  return _trigger.value.includes("hover")
+    ? props.mouseEnterDelay
+    : _trigger.value.includes("focus")
+    ? props.focusDelay
+    : 0;
+});
 
-const handleMouseLeave = (e: MouseEvent) => {
-  if (props.disabled || !triggerMethods.value.includes("hover")) {
-    return;
-  }
-  hide(props.mouseLeaveDelay);
-};
+const hideAfter = computed(() => {
+  return _trigger.value.includes("hover")
+    ? props.mouseLeaveDelay
+    : _trigger.value.includes("focus")
+    ? props.focusDelay
+    : 0;
+});
 
-const handleMouseLeaveWithContext = (e: MouseEvent) => {
-  if (!props.popupContainer) {
-    return;
-  }
-  dropdownCtx?.onMouseleave(e);
-  handleMouseLeave(e);
-};
+const { onShow, onHidden } = useDelayTrigger({
+  showAfter: showAfter.value,
+  hideAfter: hideAfter.value,
+  show,
+  hidden,
+});
 
-const handleFocusin = () => {
-  if (props.disabled || !triggerMethods.value.includes("focus")) {
-    return;
-  }
-  show(props.focusDelay);
-};
+provide(POPPER_INJECTION_KEY, {
+  TriggerRef,
+  onShow,
+  onHidden,
+});
 
-const handleFocusout = () => {
-  if (props.disabled || !triggerMethods.value.includes("focus")) {
-    return;
-  }
-  if (!props.blurToClose) {
-    return;
-  }
-  hide();
-};
+const ContentRef = ref<ContentComponentInstance>();
 
-const handleContextHide = () => {
-  hide();
-  dropdownCtx?.hide();
+const exposeShow = function () {
+  // nextTick(() => {
+  onShow();
+  // });
 };
 
-const addChildRef = (ref: any) => {
-  childrenRefs.add(ref);
-  dropdownCtx?.addChildRef(ref);
-};
-const removeChildRef = (ref: any) => {
-  childrenRefs.delete(ref);
-  dropdownCtx?.removeChildRef(ref);
+const exposeHide = function () {
+  // nextTick(() => {
+  onHidden();
+  // });
 };
 
-dropdownCtx?.addChildRef(contentRef);
-
-const { stop: removeContentResizeObserver } = useResizeObserver(
-  contentRef,
-  () => {
-    if (openState.value && props.autoFixPosition) {
-      updateContentStyle();
-    }
-  }
-);
-
-const { stop: removeTriggerResizeObserver } = useResizeObserver(
-  dropdownRef,
-  () => {
-    if (openState.value && props.autoFixPosition) {
-      updateContentStyle();
-    }
-  }
-);
-
-onClickOutside(dropdownRef, (e) => {
-  if (
-    !props.clickOutsideToClose ||
-    !openState.value ||
-    dropdownRef.value?.contains(e.target as HTMLElement) ||
-    contentRef.value?.contains(e.target as HTMLElement)
-  ) {
-    return;
-  }
-  for (const item of childrenRefs) {
-    if (item.value?.contains(e.target as HTMLElement)) {
-      return;
-    }
+const toggle = function () {
+  // nextTick(() => {
+  if (open.value) {
+    onHidden();
+  } else {
+    onShow();
   }
+  // });
+};
 
-  hide();
-});
+const dropdownContext = inject<DropdownContext>(DROPDOWN_INJECTION_KEY, {});
 
-const onlyChildRenderFunc = () => {
-  const slotContent = slots.default ? slots.default() : [];
-  const transformedSlotContent = slotContent.map((vnode) =>
-    cloneVNode(
-      vnode,
-      {
-        onClick: handleClick,
-        onContextmenu: handleContextMenuClick,
-        onMouseenter: handleMouseEnter,
-        onMouseleave: handleMouseLeave,
-        onFocusin: handleFocusin,
-        onFocusout: handleFocusout,
-        ...attrs,
-      },
-      true
-    )
-  );
-
-  children.value = transformedSlotContent;
-  return h(Fragment, children.value);
+const provideHide = () => {
+  hidden();
+  dropdownContext?.hide && dropdownContext?.hide();
 };
 
-onMounted(() => {
-  if (props.updateAtScroll) {
-    scrollElements = getScrollElements(dropdownRef.value);
-    for (const item of scrollElements) {
-      item.addEventListener("scroll", handleScroll);
-    }
-  }
-  window.addEventListener("resize", handleScroll);
+provide(DROPDOWN_INJECTION_KEY, {
+  hide: provideHide,
 });
 
-onBeforeUnmount(() => {
-  dropdownCtx?.removeChildRef(contentRef);
-  if (scrollElements) {
-    for (const item of scrollElements) {
-      item.removeEventListener("scroll", handleScroll);
-    }
-    scrollElements = undefined;
-  }
-  removeContentResizeObserver();
-  removeTriggerResizeObserver();
-  window.removeEventListener("resize", handleScroll);
-});
-
-watch(
-  () => props.visible,
-  (newVal, oldVal) => {
-    openState.value = newVal;
-  },
-  { immediate: true }
-);
-
-provide(
-  dropdownInjectionKey,
-  reactive({
-    onMouseenter: handleMouseEnterWithContext,
-    onMouseleave: handleMouseLeaveWithContext,
-    addChildRef,
-    removeChildRef,
-    hide: handleContextHide,
-  })
-);
-
-provide("openState", openState);
-
-defineExpose({ show, hide, toggle });
+defineExpose({ show: exposeShow, hide: exposeHide, toggle });
 </script>
 
 <template>
-  <LayRender :render="onlyChildRenderFunc" v-bind="$attrs"></LayRender>
-  <TeleportWrapper :to="popupContainer" :disabled="disabledTeleport">
-    <div
-      v-if="openState"
-      ref="contentRef"
-      :class="[
-        'layui-dropdown-content',
-        'layui-anim',
-        'layui-anim-upbit',
-        props.contentClass,
-      ]"
-      :style="[contentStyle, props.contentStyle ?? '']"
-      @mouseenter="handleMouseEnterWithContext"
-      @mouseleave="handleMouseLeaveWithContext"
-    >
-      <slot name="content"></slot>
-    </div>
-  </TeleportWrapper>
+  <Trigger v-bind="triggerProps">
+    <slot></slot>
+  </Trigger>
+  <Content v-bind="contentProps" ref="ContentRef">
+    <slot name="content"></slot>
+  </Content>
 </template>
diff --git a/packages/component/component/dropdown/interface.ts b/packages/component/component/dropdown/interface.ts
index 10c05d4531803985756a6dcead2f11b44645557c..a5e451cd9f14a7f20c53a69feff21146e5d42a9d 100644
--- a/packages/component/component/dropdown/interface.ts
+++ b/packages/component/component/dropdown/interface.ts
@@ -1,49 +1,42 @@
-export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
+import type { InjectionKey, StyleValue, TeleportProps } from "vue";
+import type { PopperTrigger, Placement } from "../popper/index";
 
-export type DropdownPlacementLegacy =
-  | "top-left"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-right"
-  | "right-top"
-  | "right-bottom"
-  | "left-top"
-  | "left-bottom";
+export type DropdownContext = {
+  hide?: () => void;
+};
 
-export type DropdownPlacement =
-  | "top"
-  | "top-start"
-  | "top-end"
-  | "bottom"
-  | "bottom-start"
-  | "bottom-end"
-  | "right"
-  | "right-start"
-  | "right-end"
-  | "left"
-  | "left-start"
-  | "left-end"
-  | DropdownPlacementLegacy;
+export const DROPDOWN_INJECTION_KEY: InjectionKey<DropdownContext> =
+  Symbol("LayDropdown");
 
-export interface ElementScrollRect {
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
-  scrollTop: number;
-  scrollBottom: number;
-  scrollLeft: number;
-  scrollRight: number;
-  width: number;
-  height: number;
-}
+export type DropdownTeleportProps = Partial<TeleportProps>;
 
-export interface DropdownContext {
-  onMouseenter: Function;
-  onMouseleave: Function;
-  addChildRef: Function;
-  removeChildRef: Function;
-  hide: Function;
+export interface DropdownProps {
+  visible?: boolean;
+  trigger?: PopperTrigger | Array<PopperTrigger>;
+  placement?: Placement;
+  disabled?: boolean;
+  autoFitPosition?: boolean;
+  autoFitWidth?: boolean;
+  autoFitMinWidth?: boolean;
+  clickToClose?: boolean;
+  blurToClose?: boolean;
+  clickOutsideToClose?: boolean;
+  contentOffset?: string | number;
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
+  focusDelay?: number;
+  alignPoint?: boolean;
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
+  teleportProps?: DropdownTeleportProps;
 }
 
-export const dropdownInjectionKey = Symbol("dropdownInjectKey");
+export type DropdownEmits = {
+  show: [value: boolean];
+  hide: [value: boolean];
+};
+
+export interface pointType {
+  x: number;
+  y: number;
+}
diff --git a/packages/component/component/dropdown/util.ts b/packages/component/component/dropdown/util.ts
deleted file mode 100644
index 5073aa5bc23bb9015c6956ad7296720f42eac09e..0000000000000000000000000000000000000000
--- a/packages/component/component/dropdown/util.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { DropdownPlacement } from "./interface";
-
-import { Component, onMounted, onUpdated, ref, VNode, VNodeTypes } from "vue";
-import { isArrayChildren, isComponent, isElement } from "../../utils";
-
-export interface SlotChildren {
-  value?: VNode[];
-}
-
-export const isScrollElement = (element: HTMLElement) => {
-  return (
-    element.scrollHeight > element.offsetHeight ||
-    element.scrollWidth > element.offsetWidth
-  );
-};
-
-export const getScrollElements = (container: HTMLElement | undefined) => {
-  const scrollElements: HTMLElement[] = [];
-  let element: HTMLElement | undefined = container;
-  while (element && element !== document.documentElement) {
-    if (isScrollElement(element)) {
-      scrollElements.push(element);
-    }
-    element = element.parentElement ?? undefined;
-  }
-  return scrollElements;
-};
-
-export const getChildrenArray = (vn: VNode): VNode[] | undefined => {
-  if (isArrayChildren(vn, vn.children)) {
-    return vn.children;
-  }
-  if (Array.isArray(vn)) {
-    return vn;
-  }
-  return undefined;
-};
-
-export const getFirstElementFromVNode = (
-  vn: VNode
-): HTMLElement | undefined => {
-  if (isElement(vn)) {
-    return vn.el as HTMLElement;
-  }
-  if (isComponent(vn)) {
-    if ((vn.el as Node)?.nodeType === 1) {
-      return vn.el as HTMLElement;
-    }
-    if (vn.component?.subTree) {
-      const ele = getFirstElementFromVNode(vn.component.subTree);
-      if (ele) return ele;
-    }
-  } else {
-    const children = getChildrenArray(vn);
-    return getFirstElementFromChildren(children);
-  }
-  return undefined;
-};
-
-export const getFirstElementFromChildren = (
-  children: VNode[] | undefined
-): HTMLElement | undefined => {
-  if (children && children.length > 0) {
-    for (const child of children) {
-      const element = getFirstElementFromVNode(child);
-      if (element) return element;
-    }
-  }
-  return undefined;
-};
-
-export const useFirstElement = () => {
-  const children: SlotChildren = {};
-  const firstElement = ref<HTMLElement>();
-
-  const getFirstElement = () => {
-    const element = getFirstElementFromChildren(children.value);
-    if (element !== firstElement.value) {
-      firstElement.value = element;
-    }
-  };
-
-  onMounted(() => getFirstElement());
-
-  onUpdated(() => getFirstElement());
-
-  return {
-    children,
-    firstElement,
-  };
-};
-
-export const transformPlacement = (
-  placement: DropdownPlacement
-): DropdownPlacement => {
-  const shouldTransform = placement.includes("-");
-  const placementMap: any = {
-    top: "start",
-    left: "start",
-    bottom: "end",
-    right: "end",
-  };
-
-  if (shouldTransform) {
-    const separated = placement.split("-");
-    return `${separated[0]}-${
-      placementMap[separated[1]] || separated[1]
-    }` as DropdownPlacement;
-  }
-  return placement;
-};
diff --git a/packages/component/component/dropdown/utils.ts b/packages/component/component/dropdown/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c44727c5ab8aa6bf2741afd40e25564d2217279
--- /dev/null
+++ b/packages/component/component/dropdown/utils.ts
@@ -0,0 +1,13 @@
+import type { pointType } from "./interface";
+
+export const pointMiddleware = (point: pointType) => {
+  return {
+    name: "pointMiddleware",
+    fn: () => {
+      return {
+        x: point.x,
+        y: point.y,
+      };
+    },
+  };
+};
diff --git a/packages/component/component/dropdownMenu/index.vue b/packages/component/component/dropdownMenu/index.vue
index 5c2eafd7c9273b9b2f6e98540e49c28a1bf66eca..eeecb84785be7ef70f96064b4a7073d49e66cf19 100644
--- a/packages/component/component/dropdownMenu/index.vue
+++ b/packages/component/component/dropdownMenu/index.vue
@@ -1,11 +1,35 @@
 <script lang="ts" setup>
+import { computed, useSlots, h, onMounted } from "vue";
+
 defineOptions({
   name: "LayDropdownMenu",
 });
+
+const slots = useSlots();
+
+const defaultSlot = computed(() => {
+  const children = slots.default ? slots.default() : [];
+
+  return h(
+    "div",
+    null,
+    children.map((child) => {
+      if ((child as any)?.type?.name === "LayDropdownSubMenu") {
+        child.props = {
+          ...child.props,
+          teleportProps: {
+            disabled: false,
+          },
+        };
+      }
+      return child;
+    })
+  );
+});
 </script>
 
 <template>
   <ul class="layui-menu layui-dropdown-menu">
-    <slot></slot>
+    <defaultSlot></defaultSlot>
   </ul>
 </template>
diff --git a/packages/component/component/dropdownMenuItem/index.vue b/packages/component/component/dropdownMenuItem/index.vue
index 11db06793578a2779d0deb3c2b01a40822a6e13d..56ca0503ab2ad0f986f30151404b7ed3cd526613 100644
--- a/packages/component/component/dropdownMenuItem/index.vue
+++ b/packages/component/component/dropdownMenuItem/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { inject, Ref } from "vue";
-import { DropdownContext, dropdownInjectionKey } from "../dropdown/interface";
+import type { DropdownContext } from "../dropdown/interface";
+import { DROPDOWN_INJECTION_KEY } from "../dropdown/interface";
 
 export interface DropdownMenuItemProps {
   disabled?: boolean;
@@ -14,17 +15,13 @@ const props = withDefaults(defineProps<DropdownMenuItemProps>(), {
   disabled: false,
 });
 
-const openState: Ref<boolean> = inject("openState") as Ref<boolean>;
-const dropdownCtx = inject<DropdownContext | undefined>(
-  dropdownInjectionKey,
-  undefined
-);
+const dropdownCtx = inject<DropdownContext>(DROPDOWN_INJECTION_KEY, {});
 
 const handleClick = () => {
   if (props.disabled) {
     return;
   }
-  dropdownCtx?.hide();
+  dropdownCtx?.hide && dropdownCtx?.hide();
 };
 </script>
 
diff --git a/packages/component/component/dropdownSubMenu/index.vue b/packages/component/component/dropdownSubMenu/index.vue
index d51bf532526bdafa8313783058f88ad736e95b77..0117b53687486c6c2ca0f4779601de6a16a21457 100644
--- a/packages/component/component/dropdownSubMenu/index.vue
+++ b/packages/component/component/dropdownSubMenu/index.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { inject, Ref } from "vue";
+import type { DropdownTeleportProps } from "../dropdown/interface";
+
 import LayDropdown from "../dropdown/index.vue";
 import LayDropdownMenu from "../dropdownMenu/index.vue";
 import LayDropdownMenuItem from "../dropdownMenuItem/index.vue";
 import { LayIcon } from "@layui/icons-vue";
-import { DropdownPlacement } from "../dropdown/interface";
-
-export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
+import type { PopperTrigger, Placement } from "../popper/index";
 
 export interface DropdownSubMenuProps {
-  trigger?: DropdownTrigger | DropdownTrigger[];
-  placement?: DropdownPlacement;
+  trigger?: PopperTrigger | Array<PopperTrigger>;
+  placement?: Placement;
   disabled?: boolean;
   contentOffset?: number;
+  teleportProps?: DropdownTeleportProps;
 }
 
 defineOptions({
@@ -20,10 +20,13 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<DropdownSubMenuProps>(), {
-  trigger: "hover",
+  trigger: () => ["hover"],
   disabled: false,
   placement: "right-start",
   contentOffset: 2,
+  teleportProps: () => ({
+    disabled: true,
+  }),
 });
 </script>
 
@@ -33,8 +36,8 @@ const props = withDefaults(defineProps<DropdownSubMenuProps>(), {
     :placement="placement"
     :auto-fit-min-width="false"
     :contentOffset="contentOffset"
+    :teleportProps="teleportProps"
     :disabled="disabled"
-    updateAtScroll
   >
     <lay-dropdown-menu-item :disabled="disabled">
       <template v-if="$slots.prefix" #prefix>
diff --git a/packages/component/component/form/index.less b/packages/component/component/form/index.less
index db7e3c807ab77736bd755b44a1f46c0325b89141..f9edb86eca11b9e6cbb4bdb915b5d057b7651262 100644
--- a/packages/component/component/form/index.less
+++ b/packages/component/component/form/index.less
@@ -151,6 +151,16 @@
     color: #888;
     font-size: 14px;
   }
+
+  // layer + form + select (select不挂载在body上)
+  .layui-select{
+    .layui-dropdown-content {
+      .layui-form-checkbox{
+        margin-top: 0;
+      }
+    }
+  }
+
 }
 
 .layui-form-item:has(.layui-input-inline) {
diff --git a/packages/component/component/iconPicker/index.vue b/packages/component/component/iconPicker/index.vue
index c54c6da6d4e85e00c5efdbb1c3cb9541feee2179..f694e53fba61d75fe6cb5a5f53a007aed52afdcc 100644
--- a/packages/component/component/iconPicker/index.vue
+++ b/packages/component/component/iconPicker/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import "./index.less";
+import type { DropdownTeleportProps } from "../dropdown/interface";
+
 import { computed, Ref, ref, StyleValue } from "vue";
 import { LayIconList as icons, LayIcon } from "@layui/icons-vue";
 import LayDropdown from "../dropdown/index.vue";
@@ -16,6 +18,7 @@ export interface IconPickerProps {
   allowClear?: boolean;
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
+  teleportProps?: DropdownTeleportProps;
 }
 
 defineOptions({
@@ -155,9 +158,9 @@ const searchList = (str: string, container: any) => {
     :disabled="disabled"
     :contentClass="contentClass"
     :contentStyle="contentStyle"
+    :teleportProps="teleportProps"
     @hide="openState = false"
     @show="openState = true"
-    updateAtScroll
   >
     <div
       class="layui-border-box layui-iconpicker layui-iconpicker-split"
diff --git a/packages/component/component/menu/index.less b/packages/component/component/menu/index.less
index efd3f2f652a6d90646a9e93656a943fc206361df..b6942dffd5484d27fba59d4b92fdd541ce91921a 100644
--- a/packages/component/component/menu/index.less
+++ b/packages/component/component/menu/index.less
@@ -320,6 +320,7 @@
 
 /* popup menu 样式开始 */
 .layui-sub-menu-popup-content {
+  width: max-content;
   border: unset;
   border-radius: 2px;
   background-color: #393d49;
diff --git a/packages/component/component/menu/index.vue b/packages/component/component/menu/index.vue
index 5518581427b57e658e20bf3c88209fbf5fa6764d..529dcdb33303cef48496e482d978f4dff55f4d50 100644
--- a/packages/component/component/menu/index.vue
+++ b/packages/component/component/menu/index.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { computed, ComputedRef, provide, Ref, ref, watch } from "vue";
+import {
+  computed,
+  ComputedRef,
+  provide,
+  Ref,
+  ref,
+  watch,
+  useSlots,
+  h,
+} from "vue";
 import { provideLevel } from "./useLevel";
 import "./index.less";
 
@@ -84,6 +93,28 @@ watch(
   }
 );
 
+const slots = useSlots();
+
+const defaultSlot = computed(() => {
+  const children = slots.default ? slots.default() : [];
+
+  return h(
+    "div",
+    null,
+    children.map((child) => {
+      if ((child as any)?.type?.name === "LaySubMenu") {
+        child.props = {
+          ...child.props,
+          teleportProps: {
+            disabled: false,
+          },
+        };
+      }
+      return child;
+    })
+  );
+});
+
 provideLevel(1);
 provide("isTree", isTree);
 provide("selectedKey", selectedKey);
@@ -105,6 +136,6 @@ provide("indent", indent);
       collapse ? 'layui-nav-collapse' : '',
     ]"
   >
-    <slot></slot>
+    <defaultSlot></defaultSlot>
   </ul>
 </template>
diff --git a/packages/component/component/menuItem/index.vue b/packages/component/component/menuItem/index.vue
index 427b77f368a1aea0abc69d16179b00832862187f..8260b3f58c9dca63c4af926a0b86289812cf9b5c 100644
--- a/packages/component/component/menuItem/index.vue
+++ b/packages/component/component/menuItem/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ComputedRef, inject, Ref, useSlots } from "vue";
-import { DropdownContext, dropdownInjectionKey } from "../dropdown/interface";
+import type { DropdownContext } from "../dropdown/interface";
+import { DROPDOWN_INJECTION_KEY } from "../dropdown/interface";
 import useLevel from "../menu/useLevel";
 import LayTooltip from "../tooltip/index.vue";
 import { indentHandle } from "../menu/utils";
@@ -26,13 +27,13 @@ const isCollapse = inject("isCollapse") as ComputedRef<boolean | string>;
 const theme = inject("menuTheme") as Ref<string>;
 const indent = inject("indent") as Ref<string | boolean>;
 const dropdownCtx = inject<DropdownContext | undefined>(
-  dropdownInjectionKey,
+  DROPDOWN_INJECTION_KEY,
   undefined
 );
 
 const selectHandle = function () {
   selectedKey.value = props.id;
-  dropdownCtx?.hide();
+  dropdownCtx?.hide && dropdownCtx?.hide();
 };
 
 const needTooltip = computed(
diff --git a/packages/component/component/page/__tests__/page.test.ts b/packages/component/component/page/__tests__/page.test.ts
index a34886ef783c5f1896e5b7e459d58ef497a2228a..ff49a1198ef91bfa3b2211501e506c1330a38977 100644
--- a/packages/component/component/page/__tests__/page.test.ts
+++ b/packages/component/component/page/__tests__/page.test.ts
@@ -1,6 +1,8 @@
 import { mount, shallowMount, config } from "@vue/test-utils";
-import LayPage from "../index.vue";
 import { nextTick } from "vue";
+import { sleep } from "../../../test-utils";
+
+import LayPage from "../index.vue";
 import LayIcon from "../../icon";
 import { describe, expect, test } from "vitest";
 import LayDropdown from "../../dropdown";
@@ -10,6 +12,7 @@ import LaySelectOption from "../../selectOption";
 import LaySelect from "../../select";
 import LayButton from "../../button";
 import LayInput from "../../input";
+
 config.global.components = {
   "lay-select": LaySelect,
   "lay-icon": LayIcon,
@@ -26,6 +29,7 @@ const total = 100;
 const limit = 5;
 const changeTotal = 102;
 const changeLimit = 10;
+
 describe("LayPage.vue", () => {
   test("render modelValue test", async () => {
     const wrapper = mount(LayPage, {
@@ -154,6 +158,7 @@ describe("LayPage.vue", () => {
         ".layui-page-limits  .layui-select .layui-input .layui-input-wrapper"
       )
       .trigger("click");
+    await sleep();
 
     const options = wrapper.findAllComponents(LaySelectOption);
     options[3]?.trigger("click");
@@ -279,13 +284,13 @@ describe("LayPage.vue", () => {
     });
     await wrapper.find(".layui-pager-jumper input").setValue(1000);
     await wrapper.find(".layui-pager-jumper input").trigger("blur");
-    let currentPage = wrapper.vm.currentPage;
+    const currentPage = wrapper.vm.currentPage;
 
     expect(currentPage).toBe(Math.ceil(total / 10));
 
     await wrapper.find(".layui-pager-jumper input").setValue(-1);
     await wrapper.find(".layui-pager-jumper input").trigger("blur");
-    let newVal = wrapper.vm.currentPage;
+    const newVal = wrapper.vm.currentPage;
 
     expect(newVal).toBe(1);
     wrapper.unmount();
diff --git a/packages/component/component/popper/__tests__/popper.test.tsx b/packages/component/component/popper/__tests__/popper.test.tsx
index 4176ef3841c602bfc5d5134e0921be4bb082cfa4..2f9be6de7950831cfee6da9b9f2ed47bcdc0588a 100644
--- a/packages/component/component/popper/__tests__/popper.test.tsx
+++ b/packages/component/component/popper/__tests__/popper.test.tsx
@@ -1,41 +1,76 @@
-import { reactive, nextTick, h } from "vue";
-import { describe, expect, test, vi } from "vitest";
+import { nextTick, ref } from "vue";
+import { describe, expect, test } from "vitest";
 import { mount } from "@vue/test-utils";
+import { sleep } from "../../../test-utils";
 
 import type { PopperTrigger } from "../index";
 
 import LayPopper from "../popper.vue";
 
+describe("LayPopper", () => {
+  test("嵌套popper/dropdown 点击子级不关闭整体", async () => {
+    const modelValue1 = ref(false);
+    const modelValue2 = ref(false);
 
-const _mount = (props?: any, slots = {}) => {
-  return mount(
-    {
+    const wrapper = mount({
       setup() {
-        const attrs = reactive({
-          trigger: "hover" as PopperTrigger,
-          ...props,
-        });
-
         return () => (
-          <LayPopper {...attrs}>
-            <span id="reference"></span>
-          </LayPopper>
+          <LayPopper
+            trigger="click"
+            v-model={modelValue1.value}
+            v-slots={{
+              default: () => <div class="p1">p1</div>,
+              content: () => (
+                <div>
+                  <div class="p1-content">p1-content</div>
+                  <LayPopper
+                    trigger="click"
+                    v-model={modelValue2.value}
+                    v-slots={{
+                      default: () => <div class="p2">p2</div>,
+                      content: () => <div class="p2-content">p2-content</div>,
+                    }}
+                  ></LayPopper>
+                </div>
+              ),
+            }}
+          ></LayPopper>
         );
       },
-    },
-    {
-      slots: {
-        content: h("span", { ref: "popperEl" }, "content"),
-      },
-    }
-  );
-};
+    });
 
-describe("LayPopper", () => {
-  test("trigger", async () => {
-    const wrapper = _mount();
+    const p1Dom = wrapper.find(".p1");
+
+    // 未触发click poppper.modelValue未false
+    expect(modelValue1.value).toBeFalsy();
+    await p1Dom.trigger("click");
+    await nextTick();
+    await sleep();
+    expect(modelValue1.value).toBe(true);
+
+    const p2Dom = document.body.querySelector(".p2");
+    expect(p2Dom?.innerHTML).toBe("p2");
+
+    expect(modelValue2.value).toBeFalsy();
+    await p2Dom?.dispatchEvent(new Event("click"));
+    await nextTick();
+    await sleep();
+    expect(modelValue2.value).toBe(true);
+
+    const p2ContentDom = document.querySelector(".p2-content");
+    expect(p2ContentDom?.innerHTML).toBe("p2-content");
+
+    // 模拟点击内部popper 外部popper的状态需要依旧为true
+    await p2ContentDom?.dispatchEvent(new Event("click"));
+    await nextTick();
+    await sleep(200);
+    expect(modelValue1.value).toBe(true);
 
+    // 模拟点击外部popper 内部popper状态关闭
+    const p1ContentDom = document.querySelector(".p1-content");
+    await p1ContentDom?.dispatchEvent(new Event("click"));
     await nextTick();
-    wrapper.find("#reference").trigger("mouseover");
+    await sleep(200);
+    expect(modelValue2.value).toBeFalsy();
   });
 });
diff --git a/packages/component/component/popper/component/content.vue b/packages/component/component/popper/component/content.vue
index 2c85762b678b623018bb6d27b85bfedc730672bd..5f6d09f0a258f624f6682797f384637c33d96809 100644
--- a/packages/component/component/popper/component/content.vue
+++ b/packages/component/component/popper/component/content.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import type { Ref, StyleValue, CSSProperties } from "vue";
-import type { ContentProps } from "../types";
+import { type ContentProps, CONTENT_INJECTION_KEY } from "../types";
 
 import {
   ref,
   computed,
+  provide,
   inject,
   watch,
-  nextTick,
   useSlots,
+  onMounted,
   onBeforeUnmount,
 } from "vue";
 import { onClickOutside } from "@vueuse/core";
@@ -26,14 +27,19 @@ const props = withDefaults(defineProps<ContentProps>(), {});
 const ContentRef = ref<HTMLElement | null>(null);
 const ArrowRef = ref<HTMLDivElement | null>(null);
 
+const subContents = ref<Array<Ref<HTMLElement>>>([]);
+
 const { TriggerRef, onShow, onHidden } = inject(POPPER_INJECTION_KEY)!;
+const { collectorSubContent } = inject(CONTENT_INJECTION_KEY, {});
 
 const isExist = ref(props.modelValue);
 const _visible = ref(false);
 const innerVisible = ref(props.modelValue);
 const slots = useSlots();
 // content slot中是否有内容
-const hasDefaultContent = slots.default!()[0].children?.length;
+const hasDefaultContent = computed(() => {
+  return slots.default!()[0].children?.length;
+});
 
 watch(
   () => [props.modelValue, _visible.value],
@@ -42,21 +48,23 @@ watch(
       if (!isExist.value) {
         isExist.value = props.modelValue || _visible.value;
       }
-      nextTick(() => {
-        innerVisible.value = props.modelValue || _visible.value;
-      });
+      innerVisible.value = props.modelValue || _visible.value;
     }
   }
 );
 
 const classes = computed(() => {
-  return ["layui-popper", "layui-anim", "layui-anim-fadein", props.popperClass];
+  return ["layui-popper", "layui-anim", props.popperClass];
 });
 
 const stylees = computed(() => {
   return [_popperStyle.value as CSSProperties, props.popperStyle] as StyleValue;
 });
 
+const teleportProps = computed(() => {
+  return props.teleportProps!;
+});
+
 const {
   popperStyle: _popperStyle,
   middlewareData,
@@ -65,7 +73,7 @@ const {
   startAutoUpdate,
 } = usePopper(TriggerRef as Ref<HTMLElement>, ContentRef as Ref<HTMLElement>, {
   placement: props.placement,
-  middleware: [
+  middleware: props.middlewares ?? [
     offset(props.offset),
     shift(),
     flip(),
@@ -108,22 +116,29 @@ onBeforeUnmount(() => {
 
 onClickOutside(ContentRef, (event: PointerEvent) => {
   if (
+    !props.clickOutsideToClose ||
     !innerVisible.value ||
     (TriggerRef.value as HTMLElement).contains(event.target as HTMLElement)
   )
     return;
 
+  for (const item of subContents.value) {
+    if (item.value?.contains(event.target as HTMLElement)) {
+      return;
+    }
+  }
+
   onHidden();
 });
 
 const onContentEnter = () => {
-  if (props.enterable && props.trigger === "hover") {
+  if (props.enterable && props.trigger?.includes("hover")) {
     onShow();
   }
 };
 
 const onContentLeave = () => {
-  if (props.trigger === "hover") {
+  if (props.trigger?.includes("hover")) {
     onHidden();
   }
 };
@@ -136,11 +151,27 @@ const hidden = () => {
   _visible.value = false;
 };
 
+onMounted(() => {
+  collectorSubContent?.(ContentRef as Ref<HTMLElement>);
+});
+
+const _collectorSubContent = (sub: Ref<HTMLElement>) => {
+  subContents.value.push(sub);
+};
+
+provide(CONTENT_INJECTION_KEY, {
+  collectorSubContent: _collectorSubContent,
+});
+
 defineExpose({ show, hidden, update });
 </script>
 
 <template>
-  <Teleport to="body" v-if="isExist && hasDefaultContent">
+  <Teleport
+    :to="teleportProps.to"
+    :disabled="teleportProps.disabled"
+    v-if="isExist && hasDefaultContent"
+  >
     <div
       :class="classes"
       v-show="innerVisible"
diff --git a/packages/component/component/popper/component/trigger.vue b/packages/component/component/popper/component/trigger.vue
index 02d25ea6f6014f6aacdd1439808e9b3e79aae21a..6b7e85838db896c28049369eacb84a51a37629a5 100644
--- a/packages/component/component/popper/component/trigger.vue
+++ b/packages/component/component/popper/component/trigger.vue
@@ -31,33 +31,33 @@ watch(TriggerRef, (newEl, oldEl) => {
 });
 
 const onClick = () => {
-  if (props.trigger !== "click") return;
+  if (!props.trigger?.includes("click")) return;
   onShow();
 };
 
 const onMouseenter = () => {
-  if (props.trigger !== "hover") return;
+  if (!props.trigger?.includes("hover")) return;
   onShow();
 };
 
 const onMouseleave = () => {
-  if (props.trigger !== "hover") return;
+  if (!props.trigger?.includes("hover")) return;
   onHidden();
 };
 
 const onContextMenu = function (e: Event) {
-  if (props.trigger !== "contextMenu") return;
+  if (!props.trigger?.includes("contextMenu")) return;
   e.preventDefault();
   onShow();
 };
 
 const onFocusin = () => {
-  if (props.trigger !== "focus") return;
+  if (!props.trigger?.includes("focus")) return;
   onShow();
 };
 
-const onfocusout = () => {
-  if (props.trigger !== "focus") return;
+const onFocusout = () => {
+  if (!props.trigger?.includes("focus")) return;
   onHidden();
 };
 
@@ -67,7 +67,8 @@ const events = {
   mouseleave: onMouseleave,
   contextmenu: onContextMenu,
   focusin: onFocusin,
-  focusout: onfocusout,
+  focusout: onFocusout,
+  ...props.customEvents,
 };
 </script>
 
diff --git a/packages/component/component/popper/hook/useDelayTrigger.ts b/packages/component/component/popper/hook/useDelayTrigger.ts
index 57c0aa4a0685c35c01cc6624ad090b9cec168efb..1d7260f4af48ff25a35ed6ab0fee69758be3b405 100644
--- a/packages/component/component/popper/hook/useDelayTrigger.ts
+++ b/packages/component/component/popper/hook/useDelayTrigger.ts
@@ -22,7 +22,7 @@ const useDelayTrigger = ({
     useTimeoutFn(show, unref(showAfter));
   };
   const onHidden = () => {
-    const state = useTimeoutFn(hidden, hideAfter);
+    const state = useTimeoutFn(hidden, unref(hideAfter));
     hiddenStop = state.stop;
   };
 
diff --git a/packages/component/component/popper/popper.vue b/packages/component/component/popper/popper.vue
index 4280a2bdf499f79e251f0870094e5a6242f4efdd..d2a8c712a4f74aae59044fc1783667fc3c548cf0 100644
--- a/packages/component/component/popper/popper.vue
+++ b/packages/component/component/popper/popper.vue
@@ -12,6 +12,7 @@ import Trigger from "./component/trigger.vue";
 import Content from "./component/content.vue";
 import { POPPER_INJECTION_KEY } from "./utils";
 import useDelayTrigger from "./hook/useDelayTrigger";
+import { isArray } from "../../utils";
 
 defineOptions({
   name: "LayPopper",
@@ -27,6 +28,10 @@ const props = withDefaults(defineProps<PopperProps>(), {
   enterable: true,
   showAfter: 0,
   hideAfter: 200,
+  clickOutsideToClose: true,
+  teleportProps: () => ({
+    to: "body",
+  }),
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -37,14 +42,18 @@ const TriggerRef = ref<HTMLElement | null>(null);
 
 const triggerProps = computed<TriggerProps>(() => {
   return {
-    trigger: props.trigger,
+    trigger: _trigger.value,
   };
 });
 
+const _trigger = computed(() => {
+  return isArray(props.trigger) ? props.trigger : [props.trigger];
+});
+
 const contentProps = computed<ContentProps>(() => {
   return {
     modelValue: open.value,
-    trigger: props.trigger,
+    trigger: _trigger.value,
     placement: props.placement,
     disabled: props.disabled,
     showArrow: props.showArrow,
@@ -52,6 +61,8 @@ const contentProps = computed<ContentProps>(() => {
     enterable: props.enterable,
     popperClass: props.popperClass,
     popperStyle: props.popperStyle,
+    clickOutsideToClose: props.clickOutsideToClose,
+    teleportProps: props.teleportProps,
   };
 });
 
diff --git a/packages/component/component/popper/types.ts b/packages/component/component/popper/types.ts
index 1c85afcb805487c9a8d6e044e5a4ea2b195cf2cd..5dc8afe78ad675943da767ff4288dddceb1239eb 100644
--- a/packages/component/component/popper/types.ts
+++ b/packages/component/component/popper/types.ts
@@ -1,12 +1,18 @@
-import type { ComponentPublicInstance, StyleValue } from "vue";
+import type {
+  Ref,
+  ComponentPublicInstance,
+  StyleValue,
+  TeleportProps,
+  InjectionKey,
+} from "vue";
 
-import type { Placement, OffsetOptions } from "./usePopper/index";
+import type { Placement, OffsetOptions, Middlewares } from "./usePopper/index";
 
 export type PopperTrigger = "click" | "hover" | "focus" | "contextMenu";
 
-export type PopperProps = {
+export interface PopperProps {
   modelValue?: boolean;
-  trigger?: PopperTrigger;
+  trigger?: PopperTrigger | PopperTrigger[];
   disabled?: boolean;
   placement?: Placement;
   showArrow?: boolean;
@@ -16,14 +22,33 @@ export type PopperProps = {
   hideAfter?: number;
   popperClass?: string | Array<string | object> | object;
   popperStyle?: StyleValue;
-};
+  clickOutsideToClose?: boolean;
+  middlewares?: Middlewares;
+  teleportProps?: TeleportProps;
+}
 
 export type ContentProps = PopperProps;
 
-export type TriggerProps = Pick<PopperProps, "trigger">;
+export type TriggerProps = Pick<PopperProps, "trigger"> & {
+  customEvents?: {
+    click?: (e: Event) => void;
+    mouseenter?: () => void;
+    mouseleave?: () => void;
+    contextmenu?: (e: Event) => void;
+    focusin?: () => void;
+    focusout?: () => void;
+  };
+};
 
 export type ContentComponentInstance = ComponentPublicInstance<{
   show: () => void;
   hidden: () => void;
   update: () => void;
 }>;
+
+export type ContentContext = {
+  collectorSubContent?: (sub: Ref<HTMLElement>) => void;
+};
+
+export const CONTENT_INJECTION_KEY: InjectionKey<ContentContext> =
+  Symbol("LayPopperContent");
diff --git a/packages/component/component/popper/usePopper/types.ts b/packages/component/component/popper/usePopper/types.ts
index bca1831879458cff108c1162d1cd58357901edef..f30ddcda33e8fcbd03a048103fc0b37dcdd60ab0 100644
--- a/packages/component/component/popper/usePopper/types.ts
+++ b/packages/component/component/popper/usePopper/types.ts
@@ -42,6 +42,8 @@ export type {
 
 import type { Strategy, Placement, Middleware } from "@floating-ui/dom";
 
+export type Middlewares = Middleware[];
+
 export type UsePopperOptions = {
   // isAutoUpdate？
   transform?: boolean;
@@ -56,5 +58,5 @@ export type UsePopperOptions = {
    *
    * */
   placement?: Placement;
-  middleware?: Middleware[];
+  middleware?: Middlewares;
 };
diff --git a/packages/component/component/scroll/index.vue b/packages/component/component/scroll/index.vue
index 1c577cd5b6ed4213d8923714306c5e6b76215e0e..432e5167a497f36ea44fcc74643a86a5237b289d 100644
--- a/packages/component/component/scroll/index.vue
+++ b/packages/component/component/scroll/index.vue
@@ -32,7 +32,9 @@
 
 <script lang="ts" setup>
 import "./index.less";
-import { onMounted, nextTick, reactive, onUnmounted, ref } from "vue";
+import { onMounted, reactive, onUnmounted, ref } from "vue";
+
+import { useResizeObserver } from "@vueuse/core";
 
 export interface ScrollProps {
   height?: string;
@@ -71,17 +73,28 @@ let trackHeight = 0; // 滚动条轨道高度
 let wrapHeight = 0; // 容器高度（可视高度）
 let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
 
+let scrollStop: () => void;
+let barStop: () => void;
+
 onMounted(() => {
   monitorWindow();
   monitorScrollBar();
-  nextTick(() => {
-    calculationLength();
-  });
+
+  const { stop: _scrollStop } = useResizeObserver(
+    scrollRef.value,
+    initScrollListner
+  );
+  scrollStop = _scrollStop;
+
+  const { stop: _barStop } = useResizeObserver(barRef.value, initScrollListner);
+  barStop = barStop;
 });
 
 // 页面卸载清除定时器
 onUnmounted(() => {
   window.clearInterval(time);
+  scrollStop && scrollStop();
+  barStop && barStop();
 });
 
 // 监听页面尺寸改变计算滚动条
@@ -116,21 +129,6 @@ const monitorScrollBar = function () {
   });
 };
 
-// 初始化延迟监听滚动条
-const calculationLength = function () {
-  // 直接执行initScrollListner函数，获取滚动条长度部准确
-  // 因为页面渲染有延迟，获取dom元素需要延迟
-  // 每间隔10毫秒更新滑块长度
-  time = setInterval(() => {
-    // 计算滚动条长度
-    initScrollListner();
-  }, 50);
-  // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
-  setTimeout(() => {
-    window.clearInterval(time);
-  }, 2000);
-};
-
 // 计算滚动条高度
 const initScrollListner = function () {
   let scroll = scrollRef.value;
diff --git a/packages/component/component/select/__tests__/select.test.tsx b/packages/component/component/select/__tests__/select.test.tsx
index b7ee02efe597a1f41e50e142b0ec4a3f6bac0f29..a8c255cc674016c3309ffe964b5fc36e058fb214 100644
--- a/packages/component/component/select/__tests__/select.test.tsx
+++ b/packages/component/component/select/__tests__/select.test.tsx
@@ -1,25 +1,43 @@
 import { ref, nextTick } from "vue";
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, afterEach, vi } from "vitest";
 import { mount } from "@vue/test-utils";
+import { sleep } from "../../../test-utils";
 
 import LaySelect from "../index.vue";
+import LayDropdown from "../../dropdown/index.vue";
 
 describe("LaySelect", () => {
+  afterEach(() => {
+    const popperDom = document.body.querySelector(".layui-popper");
+    if (popperDom) {
+      popperDom.remove();
+    }
+  });
+
   test("LaySelect emit clear事件", async () => {
     const wrapper = mount({
       setup() {
         const value1 = ref(1);
         const value2 = ref([1, 2]);
         const options = [
-          {label:'选项1', value:1},
-          {label:'选项2', value:2},
-          {label:'选项3', value:3},
-        ]
+          { label: "选项1", value: 1 },
+          { label: "选项2", value: 2 },
+          { label: "选项3", value: 3 },
+        ];
 
         return () => (
           <div>
-            <LaySelect v-model={value1.value} allow-clear options={options}></LaySelect>
-            <LaySelect v-model={value2.value} options={options} multiple allow-clear></LaySelect>
+            <LaySelect
+              v-model={value1.value}
+              allow-clear
+              options={options}
+            ></LaySelect>
+            <LaySelect
+              v-model={value2.value}
+              options={options}
+              multiple
+              allow-clear
+            ></LaySelect>
           </div>
         );
       },
@@ -27,22 +45,26 @@ describe("LaySelect", () => {
 
     const [selects, multipleSelect] = wrapper.findAllComponents(LaySelect);
 
-    const inputComponent = selects.find('.layui-input')
-    await inputComponent.trigger("mouseover")
+    const inputComponent = selects.find(".layui-input");
+    await inputComponent.trigger("mouseover");
 
-    const iconComponent = inputComponent.find('.layui-input-clear > .layui-icon')
-    await iconComponent.trigger("click")
+    const iconComponent = inputComponent.find(
+      ".layui-input-clear > .layui-icon"
+    );
+    await iconComponent.trigger("click");
 
     // 出否有clear回调
     expect(selects.emitted()).toHaveProperty("clear");
     expect(selects.props("modelValue")).toBe("");
 
     // start multiple
-    const tagInput = multipleSelect.find('.layui-tag-input')
-    await tagInput.trigger("mouseover")
+    const tagInput = multipleSelect.find(".layui-tag-input");
+    await tagInput.trigger("mouseover");
 
-    const iconComponent2 = tagInput.find('.layui-tag-input-clear > .layui-icon')
-    await iconComponent2.trigger("click")
+    const iconComponent2 = tagInput.find(
+      ".layui-tag-input-clear > .layui-icon"
+    );
+    await iconComponent2.trigger("click");
 
     // 出否有clear回调
     expect(multipleSelect.emitted()).toHaveProperty("clear");
@@ -54,34 +76,133 @@ describe("LaySelect", () => {
       setup() {
         const value1 = ref([1, 2]);
         const options = [
-          {label:'选项1', value:1},
-          {label:'选项2', value:2},
-          {label:'选项3', value:3},
-        ]
+          { label: "选项1", value: 1 },
+          { label: "选项2", value: 2 },
+          { label: "选项3", value: 3 },
+        ];
 
         return () => (
-          <LaySelect v-model={value1.value} options={options} multiple allow-clear></LaySelect>
+          <LaySelect
+            v-model={value1.value}
+            options={options}
+            multiple
+            allow-clear
+          ></LaySelect>
         );
       },
     });
 
     const selects = wrapper.findComponent(LaySelect);
-    await nextTick()
+    await nextTick();
 
-    const tags = selects.findAll('.layui-tag')
-    const tagClose = tags[1].find('.layui-tag-close-icon')
-    tagClose.trigger("click")
+    const tags = selects.findAll(".layui-tag");
+    const tagClose = tags[1].find(".layui-tag-close-icon");
+    await tagClose.trigger("click");
 
     // 是否触发remove-tag emit
     expect(selects.emitted()).toHaveProperty("remove-tag");
     // remove-tag emit 参数是否正确
-    expect(selects.emitted()['remove-tag'][0]).toEqual([2]);
-    await nextTick()
-    
+    expect(selects.emitted()["remove-tag"][0]).toEqual([2]);
+    await nextTick();
+
     // 校验select.modelValue
     expect(selects.props("modelValue")).toEqual([1]);
-    
   });
 
-  
+  test("dropdown 是否正常关闭", async () => {
+    const wrapper = mount({
+      setup() {
+        const value1 = ref(1);
+        const options = [
+          { label: "选项1", value: 1 },
+          { label: "选项2", value: 2 },
+          { label: "选项3", value: 3 },
+        ];
+
+        return () => (
+          <LaySelect v-model={value1.value} options={options}></LaySelect>
+        );
+      },
+    });
+
+    const inputComponent = wrapper.findComponent(".layui-input");
+    const dropDownDom = wrapper.findComponent(LayDropdown);
+
+    expect((dropDownDom.vm as any).open).toBeFalsy();
+
+    await inputComponent.trigger("click");
+    await nextTick();
+    await sleep();
+    expect((dropDownDom.vm as any).open).toBe(true);
+
+    const selectOptions = document.body.querySelectorAll(
+      ".layui-select-content .layui-select-option"
+    );
+
+    // // dropdown 数据长度
+    expect(selectOptions.length).toBe(3);
+
+    await selectOptions[1].dispatchEvent(new Event("click"));
+
+    await sleep();
+
+    expect((dropDownDom.vm as any).open).toBeFalsy();
+    expect((wrapper.findComponent(".layui-select") as any).vm.modelValue).toBe(
+      2
+    );
+  });
+
+  test("dropdown 是否正常关闭 multiple", async () => {
+    const wrapper = mount({
+      setup() {
+        const value1 = ref([]);
+        const options = [
+          { label: "选项1", value: 1 },
+          { label: "选项2", value: 2 },
+          { label: "选项3", value: 3 },
+          { label: "选项4", value: 4 },
+        ];
+
+        return () => (
+          <LaySelect
+            v-model={value1.value}
+            options={options}
+            multiple
+          ></LaySelect>
+        );
+      },
+    });
+
+    const inputComponent = wrapper.findComponent(".layui-tag-input");
+    const dropDownDom = wrapper.findComponent(LayDropdown);
+
+    await inputComponent.trigger("click");
+    await nextTick();
+    await sleep();
+    expect((dropDownDom.vm as any).open).toBe(true);
+
+    const selectOptions = document.body.querySelectorAll(
+      ".layui-select-content .layui-select-option"
+    );
+
+    // dropdown 数据长度
+    expect(selectOptions.length).toBe(4);
+
+    await selectOptions[1].dispatchEvent(new Event("click"));
+
+    await sleep();
+    // 多选不关闭dropdown
+    expect((dropDownDom.vm as any).open).toBe(true);
+
+    await selectOptions[2].dispatchEvent(new Event("click"));
+    expect(
+      (wrapper.findComponent(".layui-select") as any).vm.modelValue
+    ).toEqual([2, 3]);
+
+    // 二次点击input关闭dropdown
+    await inputComponent.trigger("click");
+    await sleep();
+
+    expect((dropDownDom.vm as any).open).toBeFalsy();
+  });
 });
diff --git a/packages/component/component/select/index.vue b/packages/component/component/select/index.vue
index 5b3ff97c87f177a5f2bc72c169693fa964e2bada..d97fad96edfc818a0871cf65d4f0185039022c3e 100644
--- a/packages/component/component/select/index.vue
+++ b/packages/component/component/select/index.vue
@@ -14,6 +14,8 @@ import {
   StyleValue,
 } from "vue";
 import { LayIcon } from "@layui/icons-vue";
+import type { DropdownTeleportProps } from "../dropdown/interface";
+
 import LayInput from "../input/index.vue";
 import LayTagInput from "../tagInput/index.vue";
 import LayDropdown from "../dropdown/index.vue";
@@ -40,6 +42,7 @@ export interface SelectProps {
   showSearch?: boolean;
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
+  teleportProps?: DropdownTeleportProps;
 }
 
 export interface SelectEmits {
@@ -74,7 +77,7 @@ const singleValue = ref("");
 const multipleValue: Ref<any[]> = ref([]);
 const emits = defineEmits<SelectEmits>();
 const openState: Ref<boolean> = ref(false);
-const options = ref<any>([]);
+const _options = ref<any>([]);
 const composing = ref(false);
 var timer: any;
 
@@ -115,8 +118,8 @@ const intOption = () => {
     getOption(slots.default(), newOptions);
   }
   Object.assign(newOptions, props.options);
-  if (JSON.stringify(newOptions) != JSON.stringify(options.value)) {
-    options.value = newOptions;
+  if (JSON.stringify(newOptions) != JSON.stringify(_options.value)) {
+    _options.value = newOptions;
   }
 };
 
@@ -144,12 +147,12 @@ onMounted(() => {
   intOption();
   timer = setInterval(intOption, 500);
   watch(
-    [selectedValue, options],
+    [selectedValue, _options],
     () => {
       if (multiple.value) {
         try {
           multipleValue.value = selectedValue.value?.map((value: any) => {
-            var option = options.value.find((item: any) => {
+            var option = _options.value.find((item: any) => {
               item.disabled == "" || item.disabled == true
                 ? (item.closable = false)
                 : (item.closable = true);
@@ -167,7 +170,7 @@ onMounted(() => {
         }
       } else {
         searchValue.value = "";
-        singleValue.value = options.value.find((item: any) => {
+        singleValue.value = _options.value.find((item: any) => {
           return item.value === selectedValue.value;
         })?.label;
       }
@@ -253,8 +256,8 @@ provide("searchMethod", props.searchMethod);
       :disabled="disabled"
       :contentClass="contentClass"
       :contentStyle="contentStyle"
-      :update-at-scroll="true"
       :autoFitWidth="autoFitWidth"
+      :teleportProps="teleportProps"
       @hide="handleHide"
       @show="openState = true"
     >
@@ -301,7 +304,7 @@ provide("searchMethod", props.searchMethod);
         :class="{ 'layui-unselect': !showSearch }"
         @compositionstart="onCompositionstart"
         @compositionend="onCompositionend"
-        @Input="handleSearch"
+        @input="handleSearch"
         @clear="handleClear"
       >
         <template v-if="slots.prepend" #prepend>
diff --git a/packages/component/component/subMenu/SubMenuPopup.vue b/packages/component/component/subMenu/SubMenuPopup.vue
index 2e3e581791801c88ff30d80369f53ab9b32fff20..da3f2faa252ac558ca99a996caabbfe087c7743e 100644
--- a/packages/component/component/subMenu/SubMenuPopup.vue
+++ b/packages/component/component/subMenu/SubMenuPopup.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DropdownTeleportProps } from "../dropdown/interface";
+
 import { computed, inject, Ref } from "vue";
 import LayDropdown from "../dropdown/index.vue";
 import { LayIcon } from "@layui/icons-vue";
@@ -7,6 +9,7 @@ import useLevel from "../menu/useLevel";
 export interface SubMenuPopupProps {
   id?: string;
   title?: string;
+  teleportProps?: DropdownTeleportProps;
 }
 
 defineOptions({
@@ -39,7 +42,7 @@ const computedPlacement = computed(() => {
     class="layui-sub-menu-popup"
     :placement="computedPlacement"
     :autoFitMinWidth="false"
-    :updateAtScroll="true"
+    :teleportProps="teleportProps"
     :contentOffset="3"
   >
     <li class="layui-nav-item">
diff --git a/packages/component/component/subMenu/index.vue b/packages/component/component/subMenu/index.vue
index 35245c7c002e2f601111823577fe8b2b2e397783..a572b28eeb142599286bef42282ffa66adca650b 100644
--- a/packages/component/component/subMenu/index.vue
+++ b/packages/component/component/subMenu/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DropdownTeleportProps } from "../dropdown/interface";
+
 import { computed, inject, ref, Ref, useSlots, watchEffect } from "vue";
 import LayTransition from "../transition/index.vue";
 import SubMenuPopup from "./SubMenuPopup.vue";
@@ -8,6 +10,7 @@ import { provideLevel, default as useLevel } from "../menu/useLevel";
 export interface SubMenuProps {
   id?: string;
   title?: string;
+  teleportProps?: DropdownTeleportProps;
 }
 
 defineOptions({
@@ -15,7 +18,11 @@ defineOptions({
 });
 
 const slots = useSlots();
-const props = defineProps<SubMenuProps>();
+const props = withDefaults(defineProps<SubMenuProps>(), {
+  teleportProps: () => ({
+    disabled: true,
+  }),
+});
 
 const { level } = useLevel();
 const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
@@ -106,7 +113,7 @@ const openHandle = function () {
       </lay-transition>
     </template>
   </li>
-  <SubMenuPopup v-else :id="id">
+  <SubMenuPopup v-else :id="id" :teleportProps="teleportProps">
     <template v-if="slots.icon" #icon>
       <slot name="icon"></slot>
     </template>
diff --git a/packages/component/component/table/index.vue b/packages/component/component/table/index.vue
index 4385ee34fac7f4c290f1fed1047764bfa0aaa2eb..ce87c0329218082b331c1a5efa9f9a7b5516c4c9 100644
--- a/packages/component/component/table/index.vue
+++ b/packages/component/component/table/index.vue
@@ -1018,7 +1018,6 @@ defineExpose({ getCheckData });
         <!-- 筛选 -->
         <lay-dropdown
           v-if="showToolbar('filter')"
-          updateAtScroll
           placement="bottom-end"
           :style="toolbarStyle('filter')"
         >
diff --git a/packages/component/component/tooltip/index.vue b/packages/component/component/tooltip/index.vue
index 9d1fb1e888fc6d077ab61958d72d2e0ea1e421a6..158dbc43e8bb6d028dcd8b48fc038079e15d19ae 100644
--- a/packages/component/component/tooltip/index.vue
+++ b/packages/component/component/tooltip/index.vue
@@ -43,6 +43,7 @@ const popperProps = computed(() => {
     disabled: props.disabled || unref(disabledPopper),
     popperClass: [
       "lay-tooltip",
+      "layui-anim-fadein",
       { "layui-dark": props.isDark },
       props.popperClass,
     ],
diff --git a/packages/component/component/treeSelect/index.vue b/packages/component/component/treeSelect/index.vue
index fa97d9e70499769989f58020602c0df7e4faee26..f9f3cbbb4262e95b23e51ba6ba5d89c047cd54ee 100644
--- a/packages/component/component/treeSelect/index.vue
+++ b/packages/component/component/treeSelect/index.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import "./index.less";
+import type { DropdownTeleportProps } from "../dropdown/interface";
+
 import { StyleValue, computed, ref, watch, useSlots, provide } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import { getNode } from "../../utils";
@@ -19,24 +21,25 @@ import {
 import { LAYUI_TREE_SELECT } from "./useTreeSelect";
 
 export interface TreeSelectProps {
-  data: any;
   modelValue: any;
-  disabled?: boolean;
-  placeholder?: string;
+  data: any;
+  size?: TreeSelectSize;
   multiple?: boolean;
   allowClear?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  checkStrictly?: boolean;
   collapseTagsTooltip?: boolean;
   minCollapsedNum?: number;
-  size?: TreeSelectSize;
-  checkStrictly?: boolean;
   search?: boolean;
   searchNodeMethod?: SearchNodeMethodType;
+  lazy?: boolean;
+  load?: LoadFunction;
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
   replaceFields?: ReplaceFieldsOptionsOptional;
   defaultExpandAll?: boolean;
-  lazy?: boolean;
-  load?: LoadFunction;
+  teleportProps?: DropdownTeleportProps;
 }
 
 export interface TreeSelectEmits {
@@ -324,12 +327,14 @@ provide(LAYUI_TREE_SELECT, {
       :disabled="disabled"
       :contentClass="contentClass"
       :contentStyle="contentStyle"
-      :update-at-scroll="true"
+      :teleportProps="teleportProps"
       :click-to-close="false"
       @show="openState = true"
       @hide="openState = false"
     >
       <lay-tag-input
+        v-if="multiple"
+        v-model="multipleValue"
         :size="size"
         :allow-clear="allowClear"
         :placeholder="_placeholder"
@@ -340,8 +345,8 @@ provide(LAYUI_TREE_SELECT, {
         @input-value-change="onSearch"
         @remove="handleRemove"
         @clear="onClear"
-        v-model="multipleValue"
-        v-if="multiple"
+        @keyup.delete.capture.prevent.stop
+        @keydown.enter.capture.prevent.stop
       >
         <template #suffix>
           <lay-icon
diff --git a/packages/component/index.ts b/packages/component/index.ts
index 100b7e8eb5edf67ff23151aa7e67e1ff186901f7..77562e51d649e94400cc54f2533e35af8cef7792 100644
--- a/packages/component/index.ts
+++ b/packages/component/index.ts
@@ -84,6 +84,7 @@ import LayException from "./component/exception/index";
 import LayResult from "./component/result/index";
 import LayFullscreen from "./component/fullscreen/index";
 import LayDatePicker from "./component/datePicker/index";
+import LayDatePickerV2 from "./component/datePickerV2/index";
 import LayTransition from "./component/transition/index";
 import LayUpload from "./component/upload/index";
 import LayRipple from "./component/ripple/index";
@@ -187,6 +188,7 @@ const components: Record<string, Plugin> = {
   LayFullscreen,
   LayConfigProvider,
   LayDatePicker,
+  LayDatePickerV2,
   LayTransition,
   LayUpload,
   LayRipple,
diff --git a/packages/component/types/common.ts b/packages/component/types/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf9c011cddb04387035f6cf3d6cf00d2ab6ee0ac
--- /dev/null
+++ b/packages/component/types/common.ts
@@ -0,0 +1,3 @@
+export type CommonSize = "lg" | "md" | "sm" | "xs";
+
+export type CommonClass = string | Array<string | object> | object;
diff --git a/packages/json-schema-form/src/component/__tests__/form.test.tsx b/packages/json-schema-form/src/component/__tests__/form.test.tsx
index 68902d294cad4ca5e1b59d4bb59326f7015086df..6416b3beea1bc90e2db1d5ce98df67957e40effa 100644
--- a/packages/json-schema-form/src/component/__tests__/form.test.tsx
+++ b/packages/json-schema-form/src/component/__tests__/form.test.tsx
@@ -1,11 +1,19 @@
 import { nextTick, reactive, h } from "vue";
 
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, afterEach } from "vitest";
 import { mount } from "@vue/test-utils";
+import { sleep } from "@layui/component/test-utils";
 
 import LayForm from "../form";
 
 describe("LayJsonSchemaForm", () => {
+  afterEach(() => {
+    const popperDom = document.body.querySelector(".layui-popper");
+    if (popperDom) {
+      popperDom.remove();
+    }
+  });
+
   test("label width", async () => {
     const wrapper = mount({
       setup() {
@@ -191,6 +199,7 @@ describe("LayJsonSchemaForm", () => {
       .find<HTMLDivElement>(".layui-unselect")
       .element.click();
     await nextTick();
+    await sleep(300);
 
     const optionsDom = wrapper.findAllComponents(".layui-select-option");
     await (optionsDom[1].element as HTMLElement).click();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c72fb55e32ab34e22b099d24ed0d050989142001..7f4154f53ed8367f23d028165af89d08bdda0762 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -97,8 +97,8 @@ importers:
         specifier: ^4.0.0
         version: 4.2.1(eslint-config-prettier@8.10.0)(eslint@8.57.0)(prettier@2.8.8)
       eslint-plugin-vue:
-        specifier: ^8.2.0
-        version: 8.7.1(eslint@8.57.0)
+        specifier: ^9.27.0
+        version: 9.27.0(eslint@8.57.0)
       execa:
         specifier: ^6.1.0
         version: 6.1.0
@@ -4288,19 +4288,21 @@ packages:
       prettier-linter-helpers: 1.0.0
     dev: true
 
-  /eslint-plugin-vue@8.7.1(eslint@8.57.0):
-    resolution: {integrity: sha512-28sbtm4l4cOzoO1LtzQPxfxhQABararUb1JtqusQqObJpWX2e/gmVyeYVfepizPFne0Q5cILkYGiBoV36L12Wg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /eslint-plugin-vue@9.27.0(eslint@8.57.0):
+    resolution: {integrity: sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==}
+    engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
     dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       eslint: 8.57.0
-      eslint-utils: 3.0.0(eslint@8.57.0)
+      globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.0
       semver: 7.6.2
-      vue-eslint-parser: 8.3.0(eslint@8.57.0)
+      vue-eslint-parser: 9.4.3(eslint@8.57.0)
+      xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4321,21 +4323,6 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils@3.0.0(eslint@8.57.0):
-    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
-    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
-    peerDependencies:
-      eslint: '>=5'
-    dependencies:
-      eslint: 8.57.0
-      eslint-visitor-keys: 2.1.0
-    dev: true
-
-  /eslint-visitor-keys@2.1.0:
-    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
-    engines: {node: '>=10'}
-    dev: true
-
   /eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -7019,9 +7006,9 @@ packages:
       vue: 3.3.13(typescript@4.9.5)
     dev: false
 
-  /vue-eslint-parser@8.3.0(eslint@8.57.0):
-    resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /vue-eslint-parser@9.4.3(eslint@8.57.0):
+    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
@@ -7179,6 +7166,11 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
     dev: false