diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 94ffa186..7bdd43e5 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -1,7 +1,7 @@
/*
* @Author: weisheng
* @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2025-06-29 17:05:24
+ * @LastEditTime: 2025-07-07 20:46:21
* @LastEditors: weisheng
* @Description:
* @FilePath: /wot-design-uni/docs/.vitepress/config.mts
@@ -119,386 +119,6 @@ export default defineConfig({
message: `Released under the MIT License.`,
copyright: 'Copyright © 2023-present weisheng',
},
- nav: [
- {
- text: '指南', activeMatch: '/guide/', items: [
- {
- text: '介绍',
- link: '/guide/introduction',
- },
- {
- text: '快速上手',
- link: '/guide/quick-use',
- },
- {
- text: '定制主题',
- link: '/guide/custom-theme',
- },
- {
- text: '常见问题',
- link: '/guide/common-problems',
- },
- {
- text: '国际化',
- link: '/guide/locale',
- }, {
- text: '更新日志',
- link: '/guide/changelog',
- }, {
- text: '⭐ 案例',
- link: '/guide/cases',
- }, {
- text: '加群沟通',
- link: '/guide/join-group',
- }
- ]
- },
- {
- text: '组件', activeMatch: '/component/', items: [
- {
- text: '基础组件',
- link: "/component/button",
- },
- {
- text: "导航组件",
- link: "/component/pagination"
- }, {
- text: "数据输入",
- link: "/component/calendar",
- }, {
- text: "反馈组件",
- link: "/component/action-sheet",
- }, {
- text: "数据展示",
- link: "/component/badge",
- }
-
- ]
- },
- { text: '🥤一杯咖啡', link: '/reward/reward', activeMatch: '/reward/' },
- { text: '快速上手项目', link: 'https://github.com/Moonofweisheng/wot-demo' },
- {
- text: '周边生态',
- items: [
- { text: 'Vue3 uni-app路由库', link: 'https://moonofweisheng.github.io/uni-mini-router/' },
- { text: '多平台小程序CI工具', link: 'https://github.com/Moonofweisheng/uni-mini-ci' },
- { text: 'Uni Helper', link: 'https://uni-helper.js.org/' },
- { text: 'uni-ku', link: 'https://github.com/uni-ku' },
- ],
- },
- ],
- sidebar: {
- '/guide/': [
- {
- text: '介绍',
- link: '/guide/introduction',
- },
- {
- text: '快速上手',
- link: '/guide/quick-use',
- },
- {
- text: '定制主题',
- link: '/guide/custom-theme',
- },
- {
- text: '国际化',
- link: '/guide/locale',
- },
- {
- text: '常见问题',
- link: '/guide/common-problems',
- },
- {
- text: '更新日志',
- link: '/guide/changelog',
- }, {
- text: '⭐ 案例',
- link: '/guide/cases',
- }, {
- text: '加群沟通',
- link: '/guide/join-group',
- }
- ],
- '/reward/': [
- {
- text: '🥤一杯咖啡',
- link: '/reward/reward',
- },
- {
- text: '榜上有名',
- link: '/reward/donor',
- }
- ],
-
- '/component/': [
- {
- text: '基础',
- collapsed: false,
- items: [
- {
- link: "/component/button",
- text: "Button 按钮"
- }, {
- link: "/component/icon",
- text: "Icon 图标"
- }, {
- link: "/component/layout",
- text: "Layout 布局"
- }, {
- link: "/component/config-provider",
- text: "ConfigProvider 全局配置"
- }, {
- link: "/component/popup",
- text: "Popup 弹出层"
- }, {
- link: "/component/resize",
- text: "Resize 监听元素尺寸变化"
- }, {
- link: "/component/transition",
- text: "Transition 动画"
- }, {
- link: "/component/fab",
- text: "Fab 悬浮按钮"
- }, {
- link: "/component/text",
- text: "Text 文本"
- }
- ]
- },
- {
-
- text: "导航",
- collapsed: false,
- items: [{
- link: "/component/pagination",
- text: "Pagination 分页"
- }, {
- link: "/component/popover",
- text: "Popover 气泡"
- }, {
- link: "/component/tabs",
- text: "Tabs 标签页"
- }, {
- link: "/component/segmented",
- text: "Segmented 分段器"
- }, {
- link: "/component/tabbar",
- text: "Tabbar 标签栏"
- }, {
- link: "/component/navbar",
- text: "Navbar 导航栏"
- }, {
- link: "/component/sidebar",
- text: "Sidebar 侧边栏"
- }, {
- link: "/component/backtop",
- text: "Backtop 回到顶部"
- }, {
- link: "/component/index-bar",
- text: "IndexBar 索引栏"
- }]
- }, {
-
- text: "数据输入",
- collapsed: false,
- items: [{
- link: "/component/calendar",
- text: "Calendar 日历选择器"
- }, {
- link: "/component/calendar-view",
- text: "CalendarView 日历面板"
- }, {
- link: "/component/checkbox",
- text: "Checkbox 复选框"
- }, {
- link: "/component/col-picker",
- text: "ColPicker 多列选择器"
- }, {
- link: "/component/datetime-picker",
- text: "DatetimePicker 时间选择器"
- }, {
- link: "/component/datetime-picker-view",
- text: "DatetimePickerView 时间选择器视图"
- }, {
- link: "/component/form",
- text: "Form 表单"
- }, {
- link: "/component/input",
- text: "Input 输入框"
- }, {
- link: "/component/textarea",
- text: "Textarea 文本域"
- }, {
- link: "/component/input-number",
- text: "InputNumber 计数器"
- }, {
- link: "/component/picker",
- text: "Picker 选择器"
- }, {
- link: "/component/picker-view",
- text: "PickerView 选择器视图"
- }, {
- link: "/component/radio",
- text: "Radio 单选框"
- }, {
- link: "/component/rate",
- text: "Rate 评分"
- }, {
- link: "/component/search",
- text: "Search 搜索框"
- }, {
- link: "/component/select-picker",
- text: "SelectPicker 单复选选择器"
- }, {
- link: "/component/slider",
- text: "Slider 滑块"
- }, {
- link: "/component/switch",
- text: "Switch 开关"
- }, {
- link: "/component/upload",
- text: "Upload 上传"
- }, {
- link: "/component/password-input",
- text: "PasswordInput 密码输入框"
- }, {
- link: "/component/signature",
- text: "Signature 签名"
- }]
- }, {
- text: "反馈",
- collapsed: false,
- items: [{
- link: "/component/action-sheet",
- text: "ActionSheet 动作面板"
- }, {
- link: "/component/drop-menu",
- text: "DropMenu 下拉菜单"
- }, {
- link: "/component/floating-panel",
- text: "FloatingPanel 浮动面板"
- }, {
- link: "/component/loading",
- text: "Loading 加载"
- }, {
- link: "/component/message-box",
- text: "MessageBox 弹框"
- }, {
- link: "/component/notice-bar",
- text: "NoticeBar 通知栏"
- }, {
- link: "/component/overlay",
- text: "Overlay 遮罩层"
- }, {
- link: "/component/progress",
- text: "Progress 进度条"
- }, {
- link: "/component/circle",
- text: "Circle 环形进度条"
- }, {
- link: "/component/sort-button",
- text: "SortButton 排序按钮"
- }, {
- link: "/component/status-tip",
- text: "StatusTip 缺省提示"
- }, {
- link: "/component/swipe-action",
- text: "SwipeAction 滑动操作"
- }, {
- link: "/component/toast",
- text: "Toast 轻提示"
- }, {
- link: "/component/notify",
- text: "Notify 消息通知"
- }, {
- link: "/component/tooltip",
- text: "Tooltip 文字提示"
- }, {
- link: "/component/count-down",
- text: "CountDown 倒计时"
- }, {
- link: "/component/count-to",
- text: "CountTo 数字滚动"
- }, {
- link: "/component/keyboard",
- text: "Keyboard 虚拟键盘"
- }, {
- link: "/component/number-keyboard",
- text: "NumberKeyboard 数字键盘"
- }]
- },
- {
- text: "数据展示",
- collapsed: false,
- items: [{
- link: "/component/badge",
- text: "Badge 徽标"
- }, {
- link: "/component/card",
- text: "Card 卡片"
- }, {
- link: "/component/cell",
- text: "Cell 单元格"
- }, {
- link: "/component/collapse",
- text: "Collapse 折叠面板"
- }, {
- link: "/component/curtain",
- text: "Curtain 幕帘"
- }, {
- link: "/component/divider",
- text: "Divider 分割线"
- }, {
- link: "/component/gap",
- text: "Gap 间隔槽"
- }, {
- link: "/component/img",
- text: "Img 图片"
- }, {
- link: "/component/img-cropper",
- text: "ImgCropper 图片裁剪"
- }, {
- link: "/component/grid",
- text: "Grid 宫格"
- }, {
- link: "/component/loadmore",
- text: "Loadmore 加载更多"
- }, {
- link: "/component/skeleton",
- text: "Skeleton 骨架屏"
- }, {
- link: "/component/steps",
- text: "Steps 步骤条"
- }, {
- link: "/component/sticky",
- text: "Sticky 粘性布局"
- }, {
- link: "/component/tag",
- text: "Tag 标签"
- }, {
- link: "/component/watermark",
- text: "Watermark 水印"
- }, {
- link: "/component/swiper",
- text: "Swiper 轮播图"
- }, {
- link: "/component/table",
- text: "Table 表格"
- }]
- },
- {
- text: '组合式API',
- items: [
- { text: 'useUpload', link: '/component/use-upload' },
- { text: 'useCountDown', link: '/component/use-count-down' },
- { text: 'useToast', link: '/component/use-toast' },
- { text: 'useMessage', link: '/component/use-message' }
- ]
- }
- ]
- }
-
},
})
diff --git a/docs/.vitepress/locales/en-US.ts b/docs/.vitepress/locales/en-US.ts
index 18cd070d..1408259c 100644
--- a/docs/.vitepress/locales/en-US.ts
+++ b/docs/.vitepress/locales/en-US.ts
@@ -173,6 +173,10 @@ export default defineConfig({
{
link: '/en-US/component/text',
text: 'Text'
+ },
+ {
+ link: '/en-US/component/root-portal',
+ text: 'RootPortal'
}
]
},
diff --git a/docs/.vitepress/locales/zh-CN.ts b/docs/.vitepress/locales/zh-CN.ts
index 0fda2372..a078a08b 100644
--- a/docs/.vitepress/locales/zh-CN.ts
+++ b/docs/.vitepress/locales/zh-CN.ts
@@ -173,6 +173,10 @@ export default defineConfig({
{
link: '/component/text',
text: 'Text 文本'
+ },
+ {
+ link: '/component/root-portal',
+ text: 'RootPortal 根节点'
}
]
},
diff --git a/docs/component/calendar.md b/docs/component/calendar.md
index 9bb0286a..804bcd93 100644
--- a/docs/component/calendar.md
+++ b/docs/component/calendar.md
@@ -438,6 +438,7 @@ function handleConfirm({ value }) {
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发 picker-view 的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25 版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
| with-cell | 是否使用内置 cell 选择器 | boolean | - | true | 1.5.0 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构
diff --git a/docs/component/col-picker.md b/docs/component/col-picker.md
index f334f404..520770b5 100644
--- a/docs/component/col-picker.md
+++ b/docs/component/col-picker.md
@@ -652,6 +652,7 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| lineWidth | 底部条宽度，单位像素 | number | - | - | 1.3.7 |
| lineHeight | 底部条高度，单位像素 | number | - | - | 1.3.7 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构
diff --git a/docs/component/curtain.md b/docs/component/curtain.md
index ce5308dd..2d777d71 100644
--- a/docs/component/curtain.md
+++ b/docs/component/curtain.md
@@ -95,6 +95,7 @@ function handleClick() {
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | false | - |
| hide-when-close | 是否当关闭时将弹出层隐藏（display: none） | boolean | - | true | - |
| z-index | 设置层级 | number | - | 10 | 1.4.0 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
## Events
diff --git a/docs/component/datetime-picker.md b/docs/component/datetime-picker.md
index 9ecb8c79..bc898a22 100644
--- a/docs/component/datetime-picker.md
+++ b/docs/component/datetime-picker.md
@@ -318,6 +318,7 @@ const displayFormatTabLabel = (items) => {
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
| use-second | 是否显示秒选择，仅在 time 和 datetime 类型下生效 | boolean | - | false | 1.10.0 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构
diff --git a/docs/component/drop-menu.md b/docs/component/drop-menu.md
index c260edc4..b07a8d4b 100644
--- a/docs/component/drop-menu.md
+++ b/docs/component/drop-menu.md
@@ -207,6 +207,7 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
| value-key | 选项对象中，value 对应的 key | string | - | value | - |
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
| tip-key | 选项对象中，选项说明对应的 key | string | - | tip | - |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
## DropdownItem Events
diff --git a/docs/component/keyboard.md b/docs/component/keyboard.md
index 4b4a3d26..e6961583 100644
--- a/docs/component/keyboard.md
+++ b/docs/component/keyboard.md
@@ -254,9 +254,10 @@ const onDelete = () => showToast('删除')
| closeButtonLoading | 关闭按钮是否显示加载状态 | `boolean` | - | `false` | 1.3.10 |
| modal | 是否显示蒙层遮罩 | `boolean` | - | `false` | 1.3.10 |
| hideOnClickOutside | 是否在点击外部时收起键盘 | `boolean` | - | `true` | 1.3.10 |
-| lockScroll | 是否锁定滚动 | `boolean` | - | `true` | 1.3.10 |
+| lockScroll | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | `boolean` | - | `true` | 1.3.10 |
| safeAreaInsetBottom | 是否在底部安全区域内 | `boolean` | - | `true` | 1.3.10 |
| extraKey | 额外按键 | `string` / `string[]` | - | - | 1.3.10 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | `boolean` | - | `false` | $LOWEST_VERSION$ |
## Slot
diff --git a/docs/component/message-box.md b/docs/component/message-box.md
index 2f14d81c..ff4fb207 100644
--- a/docs/component/message-box.md
+++ b/docs/component/message-box.md
@@ -274,6 +274,7 @@ MessageBox.prompt(options)
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------- | -------- | ------- | ------ | ------ | -------- |
| selector | 指定唯一标识 | string | - | - | - |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
## 外部样式类
diff --git a/docs/component/notify.md b/docs/component/notify.md
index 37eeab8f..80df027c 100644
--- a/docs/component/notify.md
+++ b/docs/component/notify.md
@@ -193,6 +193,7 @@ export default {
| background | 背景颜色 | string | - | - | - |
| safeHeight | 顶部安全高度 | number / string | - | - | - |
| selector | 指定唯一标识 | number | - | - | - |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
## Events
| 事件名 | 说明 | 参数 | 最低版本 |
diff --git a/docs/component/number-keyboard.md b/docs/component/number-keyboard.md
index 00d344d9..92892a12 100644
--- a/docs/component/number-keyboard.md
+++ b/docs/component/number-keyboard.md
@@ -236,9 +236,10 @@ const onDelete = () => showToast('删除')
| closeButtonLoading | 关闭按钮是否显示加载状态 | `boolean` | - | `false` | 0.1.65 |
| modal | 是否显示蒙层遮罩 | `boolean` | - | `false` | 0.1.65 |
| hideOnClickOutside | 是否在点击外部时收起键盘 | `boolean` | - | `true` | 0.1.65 |
-| lockScroll | 是否锁定滚动 | `boolean` | - | `true` | 0.1.65 |
+| lockScroll | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | `boolean` | - | `true` | 0.1.65 |
| safeAreaInsetBottom | 是否在底部安全区域内 | `boolean` | - | `true` | 0.1.65 |
| extraKey | 额外按键 | `string` / `string[]` | - | - | 0.1.65 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | `boolean` | - | `false` | $LOWEST_VERSION$ |
## Slot
diff --git a/docs/component/picker.md b/docs/component/picker.md
index 455b085f..1d89ccda 100644
--- a/docs/component/picker.md
+++ b/docs/component/picker.md
@@ -272,6 +272,7 @@ function handleConfirm({ value }) {
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
| clearable | 显示清空按钮 | boolean | - | false | 1.3.13 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构
diff --git a/docs/component/popup.md b/docs/component/popup.md
index 88508ba4..201059b9 100644
--- a/docs/component/popup.md
+++ b/docs/component/popup.md
@@ -66,6 +66,26 @@
```
+## root-portal
+
+当使用 `root-portal` 属性为 `true` 时，弹出层会从页面中脱离出来，这可以避免父组件的 transform、filter 等 CSS 属性影响弹出层的 fixed 定位。
+
+不同平台采用不同的实现方案：
+- **H5端**：使用 Vue 3 的 teleport 特性
+- **APP端**：使用 renderjs 将元素移动到 uni-app 根节点
+- **微信小程序/支付宝小程序**：使用 root-portal 组件
+- **其他平台**：不支持此功能
+
+```html
+
+ 我被传送到了根节点中
+
+```
+
+:::tip 提示
+该功能主要用于解决复杂布局中弹窗的层级和定位问题，在需要时才建议开启。
+:::
+
## 禁止滚动穿透
使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
@@ -103,7 +123,8 @@ h5 滚动穿透不需要处理，组件已默认开启 `lock-scroll`。
| lazy-render | 弹层内容懒渲染，触发展示时才渲染内容 | boolean | - | true | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | false | - |
| transition | 动画类型，参见 wd-transition 组件的name | string | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | - | - |
-| lockScroll | 是否锁定背景滚动 | boolean | - | true | 0.1.30 |
+| lockScroll | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | boolean | - | true | 0.1.30 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
## Events
diff --git a/docs/component/root-portal.md b/docs/component/root-portal.md
new file mode 100644
index 00000000..080b0edf
--- /dev/null
+++ b/docs/component/root-portal.md
@@ -0,0 +1,61 @@
+# Root Portal 根节点传送$LOWEST_VERSION$
+
+是否从页面中脱离出来，用于解决各种 fixed 失效问题，主要用于制作弹窗、弹出层等。
+
+:::tip 提示
+根节点传送组件仅支持`微信小程序`、`支付宝小程序`、`APP`和`H5`平台，组件会自动根据平台选择合适的实现方式：
+
+- **H5 端**：使用 `teleport` 特性
+- **微信小程序和支付宝小程序**：使用 `root-portal` 组件
+- **App 端**：使用 renderjs 实现
+- **其他平台**：不支持此功能
+
+该功能主要用于解决复杂布局中弹窗的层级和定位问题，在需要时才建议使用。
+:::
+
+
+
+## 基本用法
+
+使用 `wd-root-portal` 将内容渲染到根节点，避免被父组件的样式影响。
+
+```html
+显示弹窗
+
+
+
+ 这是一个全局弹窗
+ 关闭
+
+
+
+```
+
+```scss
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ text-align: center;
+}
+```
+
+
+## Slots
+
+| 名称 | 说明 | 最低版本 |
+| ------- | ---------------------------- | -------- |
+| default | 默认插槽，用于渲染传送内容 | - |
\ No newline at end of file
diff --git a/docs/component/select-picker.md b/docs/component/select-picker.md
index 2cddac6c..48cbc493 100644
--- a/docs/component/select-picker.md
+++ b/docs/component/select-picker.md
@@ -361,6 +361,7 @@ function handleConfirm({ value, selectedItems }) {
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| clearable | 显示清空按钮 | boolean | - | false | 1.3.13 |
+| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构
diff --git a/docs/en-US/component/curtain.md b/docs/en-US/component/curtain.md
index 7fcc1d6f..ea5061c8 100644
--- a/docs/en-US/component/curtain.md
+++ b/docs/en-US/component/curtain.md
@@ -95,6 +95,7 @@ function handleClick() {
| close-on-click-modal| Close on mask click | boolean | - | false | - |
| hide-when-close | Hide popup layer when closed (display: none) | boolean | - | true | - |
| z-index | Set layer level | number | - | 10 | 1.4.0 |
+| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | $LOWEST_VERSION$ |
## Events
diff --git a/docs/en-US/component/datetime-picker.md b/docs/en-US/component/datetime-picker.md
index 00fd2ca2..dc66bc0c 100644
--- a/docs/en-US/component/datetime-picker.md
+++ b/docs/en-US/component/datetime-picker.md
@@ -313,6 +313,7 @@ const displayFormatTabLabel = (items) => {
| rules | Form validation rules, used with `wd-form` component | `FormItemRule []` | - | `[]` | - |
| immediate-change | Whether to trigger the picker-view's change event immediately when the finger is released. If not enabled, the change event will be triggered after the scrolling animation ends. Available from version 1.2.25, only supported on WeChat Mini Program and Alipay Mini Program. | boolean | - | false | 1.2.25 |
| use-second | Whether to display the second selection, only effective for time and datetime types | boolean | - | false | 1.10.0 |
+| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule Data Structure
diff --git a/docs/en-US/component/drop-menu.md b/docs/en-US/component/drop-menu.md
index 02d4bcbe..df154792 100644
--- a/docs/en-US/component/drop-menu.md
+++ b/docs/en-US/component/drop-menu.md
@@ -206,6 +206,7 @@ Set the `direction` property value to `up`, and the menu will expand upward
| value-key | Key for value in options object | string | - | value | - |
| label-key | Key for display text in options object | string | - | label | - |
| tip-key | Key for option description in options object | string | - | tip | - |
+| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | $LOWEST_VERSION$ |
| icon-name | Selected icon name (available names in wd-icon component) | string | - | check | - |
## DropMenu Slot
diff --git a/docs/en-US/component/keyboard.md b/docs/en-US/component/keyboard.md
index f2cb34c7..047ba1a0 100644
--- a/docs/en-US/component/keyboard.md
+++ b/docs/en-US/component/keyboard.md
@@ -213,6 +213,7 @@ You can bind the keyboard's current input value through `v-model` and limit the
| show-close-button | Whether to show close button | boolean | true | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | true | - |
| z-index | Keyboard z-index | number | 100 | - |
+| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | false | $LOWEST_VERSION$ |
## Events
diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md
index 7266379a..c6fdd0af 100644
--- a/docs/en-US/component/message-box.md
+++ b/docs/en-US/component/message-box.md
@@ -214,6 +214,7 @@ You can customize the style of operation buttons through the button properties `
| close-on-click-modal | Whether to close when clicking modal | boolean | - | true | - |
| before-confirm | Function executed before confirmation | function({ resolve }) | - | - | - |
| selector | Component unique identifier | string | - | wd-message-box | - |
+| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | $LOWEST_VERSION$ |
## Events
diff --git a/docs/en-US/component/notify.md b/docs/en-US/component/notify.md
index 30841f5c..5c52b6b0 100644
--- a/docs/en-US/component/notify.md
+++ b/docs/en-US/component/notify.md
@@ -193,6 +193,7 @@ export default {
| background | Background color | string | - | - | - |
| safeHeight | Top safe height | number / string | - | - | - |
| selector | Unique identifier | number | - | - | - |
+| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | $LOWEST_VERSION$ |
## Events
| Event Name | Description | Parameters | Version |
diff --git a/docs/en-US/component/number-keyboard.md b/docs/en-US/component/number-keyboard.md
index 6f96dc45..4b1e717d 100644
--- a/docs/en-US/component/number-keyboard.md
+++ b/docs/en-US/component/number-keyboard.md
@@ -217,6 +217,7 @@ Currently, `modal` only controls whether the overlay is transparent, while `hide
| random-key-order | Whether to shuffle keyboard keys | boolean | - | `false` | - |
| hide-on-click-outside | Whether to hide keyboard when clicking outside | boolean | - | `true` | - |
| modal | Whether to show transparent modal | boolean | - | `true` | - |
+| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | `false` | $LOWEST_VERSION$ |
## Events
| Event Name | Description | Parameters | Version |
diff --git a/docs/en-US/component/popup.md b/docs/en-US/component/popup.md
index d6150077..70d00c57 100644
--- a/docs/en-US/component/popup.md
+++ b/docs/en-US/component/popup.md
@@ -74,6 +74,26 @@ Set the `close-on-click-modal` attribute to `false` to disable closing the popup
```
+## root-portal
+
+When the `root-portal` attribute is set to `true`, the popup will be teleported to the page root node, which can avoid the influence of parent component's transform, filter and other CSS properties on the fixed positioning of the popup.
+
+Different platforms use different implementation schemes:
+- **H5**: Use Vue 3's teleport feature
+- **APP**: Use renderjs to move elements to the uni-app root node
+- **WeChat Mini Program/Alipay Mini Program**: Use root-portal component
+- **Other platforms**: root-portal feature is not supported
+
+```html
+
+ I'm teleported to the root node
+
+```
+
+:::tip Tip
+This feature is mainly used to solve layering and positioning issues of popups in complex layouts, and it is recommended to enable it only when needed.
+:::
+
## Attributes
| Attribute | Description | Type | Default | Version |
@@ -93,6 +113,7 @@ Set the `close-on-click-modal` attribute to `false` to disable closing the popup
| custom-style | Custom popup style | object | - | - |
| border-radius | Border radius of the popup | string | 0 | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | false | - |
+| root-portal | Whether to break away from the page to solve various fixed failure issues | boolean | false | $LOWEST_VERSION$ |
## Events
diff --git a/docs/en-US/component/root-portal.md b/docs/en-US/component/root-portal.md
new file mode 100644
index 00000000..b8ef6140
--- /dev/null
+++ b/docs/en-US/component/root-portal.md
@@ -0,0 +1,58 @@
+# Root Portal$LOWEST_VERSION$
+
+Whether to break out of the page, used to solve various fixed positioning issues, mainly used for making popups and overlays.
+
+:::tip Tip
+The root portal component only supports `WeChat Mini Program`, `Alipay Mini Program`, `APP` and `H5` platforms. The component automatically chooses the appropriate implementation based on the platform:
+
+- **H5**: Uses `teleport` feature
+- **WeChat Mini Program and Alipay Mini Program**: Uses `root-portal` component
+- **App**: Uses renderjs implementation
+- **Other platforms**: Not supported
+
+This feature is mainly used to solve the hierarchy and positioning problems of popups in complex layouts, and is recommended only when needed.
+:::
+
+## Basic Usage
+
+Use `wd-root-portal` to render content to the root node, avoiding style interference from parent components.
+
+```html
+Show Modal
+
+
+
+ This is a global modal
+ Close
+
+
+
+```
+
+```scss
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ text-align: center;
+}
+```
+
+## Slots
+
+| Name | Description | Version |
+| ------- | ------------------------------ | ------- |
+| default | Default slot for portal content | - |
\ No newline at end of file
diff --git a/src/locale/en-US.json b/src/locale/en-US.json
index 9c9ae31b..94d48831 100644
--- a/src/locale/en-US.json
+++ b/src/locale/en-US.json
@@ -1609,5 +1609,16 @@
"zuo-shang": "Top Left",
"zuo-xia": "lower left",
"zuo-you-hua-dong": "Slide left and right",
- "zuo-zhong": "Middle Left"
+ "zuo-zhong": "Middle Left",
+ "xian-shi-tan-chuang": "Show Modal",
+ "yu-zhe-zhao-ceng-jie-he": "Combined with Overlay",
+ "xian-shi-mo-tai-kuang": "Show Modal",
+ "quan-ju-tong-zhi": "Global Notification",
+ "xian-shi-tong-zhi": "Show Notification",
+ "quan-ju-jia-zai": "Global Loading",
+ "xian-shi-jia-zai": "Show Loading",
+ "zhe-shi-yi-ge-quan-ju-tan-chuang": "This is a global modal",
+ "mo-tai-kuang-biao-ti": "Modal Title",
+ "zhe-shi-mo-tai-kuang-de-nei-rong": "This is modal content",
+ "rootportal-title": "Root Portal"
}
diff --git a/src/locale/zh-CN.json b/src/locale/zh-CN.json
index 30b6f9c9..b3e47e21 100644
--- a/src/locale/zh-CN.json
+++ b/src/locale/zh-CN.json
@@ -1609,5 +1609,37 @@
"zuo-shang": "左上",
"zuo-xia": "左下",
"zuo-you-hua-dong": "左右滑动",
- "zuo-zhong": "左中"
+ "zuo-zhong": "左中",
+ "xian-shi-tan-chuang": "显示弹窗",
+ "yu-zhe-zhao-ceng-jie-he": "与遮罩层结合",
+ "xian-shi-mo-tai-kuang": "显示模态框",
+ "quan-ju-tong-zhi": "全局通知",
+ "xian-shi-tong-zhi": "显示通知",
+ "quan-ju-jia-zai": "全局加载",
+ "xian-shi-jia-zai": "显示加载",
+ "zhe-shi-yi-ge-quan-ju-tan-chuang": "这是一个全局弹窗",
+ "mo-tai-kuang-biao-ti": "模态框标题",
+ "zhe-shi-mo-tai-kuang-de-nei-rong": "这是模态框的内容",
+ "rootportal-title": "Root Portal 根节点传送门",
+ "ji-chu-yong-fa": "基本用法",
+ "xian-shi-ji-ben-tan-chuang": "显示基本弹窗",
+ "ji-ben-tan-chuang": "基本弹窗",
+ "zhe-shi-yi-ge-shi-yong-root-portal-de-ji-ben-tan-chuang-shi-li": "这是一个使用 root-portal 的基本弹窗示例",
+ "guan-bi": "关闭",
+ "zai-zhe-zhao-ceng-zhong-de-xiao-guo-dui-bi": "在遮罩层中的效果对比",
+ "bu-shi-yong-root-portal": "不使用 root-portal",
+ "ke-neng-shou-dao-fu-zu-jian-yang-shi-ying-xiang": "可能受到父组件样式影响",
+ "xian-shi-pu-tong-tan-chuang": "显示普通弹窗",
+ "shi-yong-root-portal": "使用 root-portal",
+ "bu-shou-fu-zu-jian-yang-shi-ying-xiang": "不受父组件样式影响",
+ "xian-shi-chuan-song-men-tan-chuang": "显示传送门弹窗",
+ "pu-tong-tan-chuang": "普通弹窗",
+ "chuan-song-men-tan-chuang": "传送门弹窗",
+ "que-ding": "确定",
+ "quan-ju-tong-zhi": "全局通知",
+ "xian-shi-tong-zhi": "显示通知",
+ "zhe-shi-yi-tiao-quan-ju-tong-zhi": "这是一条全局通知",
+ "quan-ju-jia-zai-zhuang-tai": "全局加载状态",
+ "xian-shi-jia-zai": "显示加载",
+ "jia-zai-zhong": "加载中..."
}
diff --git a/src/pages.json b/src/pages.json
index 95d41cf7..6224104c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1311,6 +1311,21 @@
"navigationBarTitleText": "%wxrewardad-title%"
// #endif
}
+ },
+ {
+ "path": "rootPortal/Index",
+ "name": "rootPortal",
+ "style": {
+ "mp-alipay": {
+ "allowsBounceVertical": "NO"
+ },
+ // #ifdef MP
+ "navigationBarTitleText": "Root Portal 根节点传送门",
+ // #endif
+ // #ifndef MP
+ "navigationBarTitleText": "%rootportal-title%"
+ // #endif
+ }
}
]
}
diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
index 0e69e4c7..ba5149d2 100644
--- a/src/pages/index/Index.vue
+++ b/src/pages/index/Index.vue
@@ -94,6 +94,10 @@ const list = computed(() => [
{
id: 'text',
name: t('text-wen-ben')
+ },
+ {
+ id: 'rootPortal',
+ name: t('rootportal-title')
}
]
},
diff --git a/src/subPages/popup/Index.vue b/src/subPages/popup/Index.vue
index 37278eb9..0e370c7b 100644
--- a/src/subPages/popup/Index.vue
+++ b/src/subPages/popup/Index.vue
@@ -45,6 +45,12 @@
+
+
+
+
+
+
{{ $t('dan-dan-dan') }}
@@ -72,6 +78,36 @@
custom-style="height: 200px;"
@close="handleClose10"
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -160,6 +196,37 @@ function handleClick10() {
function handleClose10() {
show10.value = false
}
+
+const show11 = ref(false)
+const showChild1 = ref(false)
+const showChild2 = ref(false)
+
+function handleClick11() {
+ show11.value = true
+}
+
+function handleClose11() {
+ show11.value = false
+ // 关闭父弹窗时也关闭子弹窗
+ showChild1.value = false
+ showChild2.value = false
+}
+
+function openChildPopup(useTeleport: boolean) {
+ if (useTeleport) {
+ showChild2.value = true
+ } else {
+ showChild1.value = true
+ }
+}
+
+function handleCloseChild1() {
+ showChild1.value = false
+}
+
+function handleCloseChild2() {
+ showChild2.value = false
+}
diff --git a/src/subPages/rootPortal/Index.vue b/src/subPages/rootPortal/Index.vue
new file mode 100644
index 00000000..9fce4b51
--- /dev/null
+++ b/src/subPages/rootPortal/Index.vue
@@ -0,0 +1,63 @@
+
+
+
+ {{ $t('xian-shi-ji-ben-tan-chuang') }}
+
+
+
+ {{ $t('ji-ben-tan-chuang') }}
+ {{ $t('zhe-shi-yi-ge-shi-yong-root-portal-de-ji-ben-tan-chuang-shi-li') }}
+ {{ $t('guan-bi') }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts b/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
index c13a9e11..b2086a73 100644
--- a/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
@@ -1,12 +1,3 @@
-/*
- * @Author: weisheng
- * @Date: 2024-03-18 11:22:03
- * @LastEditTime: 2024-04-04 22:35:25
- * @LastEditors: weisheng
- * @Description:
- * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
- * 记得注释
- */
import type { ExtractPropTypes } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
@@ -115,7 +106,13 @@ export const actionSheetProps = {
* @default true
* @type {boolean}
*/
- safeAreaInsetBottom: makeBooleanProp(true)
+ safeAreaInsetBottom: makeBooleanProp(true),
+ /**
+ * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+ * 类型：boolean
+ * 默认值：false
+ */
+ rootPortal: makeBooleanProp(false)
}
export type ActionSheetProps = ExtractPropTypes
diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue b/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
index 3711d620..111e04e8 100644
--- a/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
@@ -9,6 +9,7 @@
:close-on-click-modal="closeOnClickModal"
:safe-area-inset-bottom="safeAreaInsetBottom"
:lazy-render="lazyRender"
+ :root-portal="rootPortal"
@enter="handleOpen"
@close="close"
@after-enter="handleOpened"
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
index 4ff17ad8..71233f29 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
@@ -181,7 +181,11 @@ export const calendarProps = {
* 是否使用内置单元格
* 默认为 true，使用内置单元格
*/
- withCell: makeBooleanProp(true)
+ withCell: makeBooleanProp(true),
+ /**
+ * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+ */
+ rootPortal: makeBooleanProp(false)
}
export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
index 25cc0b01..ac372281 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
@@ -34,6 +34,7 @@
:close-on-click-modal="closeOnClickModal"
:safe-area-inset-bottom="safeAreaInsetBottom"
:z-index="zIndex"
+ :root-portal="rootPortal"
@close="close"
>