[elementPlus] teleported 在 ElSubMenu中的用途

最新推荐文章于 2025-01-07 17:13:26 发布
最新推荐文章于 2025-01-07 17:13:26 发布
阅读量890 收藏 9
点赞数 7
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iOSTianNan/article/details/135051648
版权

如图

在这里插入图片描述
一个菜单对应的路由结构如上图
如果做适配窄屏幕
在这里插入图片描述
如果在

   <ElSubMenu :index="route.path" >

中不加入 teleported
就会出现问题

在这里插入图片描述

加上就OK了

      <ElSubMenu :index="route.path" teleported>

在这里插入图片描述

iOSTianNan
关注
el-popover内有select的时候在选择后会自动关闭
南七小僧的学海无涯
08-31 1199
默认情况下，select 的下拉框dom是添加到body元素中的，这就导致虽然视图层面看，select 下拉框在 popover body里面，但实际上他们是dom关系是兄弟元素，所以点击下拉框的行为对于 popover 而言，和在popover外面鼠标点击的行为是一致的。这就导致popover也关闭了。尝试解决方法：将 select 组件的 teleported属性设置为false，使得它的下拉框被渲染在popover内部。
【elementplus】el-table操作列使用设置teleported: false的el-dropdown时，el-dropdown__popper会被el-table遮挡的问题
bbt953的博客
07-12 2056
el-table操作列使用设置teleported: false的el-dropdown时，el-dropdown__popper会被el-table遮挡的问题
2023213-popover弹窗框中的teleported属性--Element-plus踩坑日记
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
02-13 2971
这个插入body元素确实是插入了body元素中，但是它是仅是降了一级成为了。今天在做项目时，有一个地方用到了弹窗框，但是有需求需要修改弹窗的阴影部分。将 popover 的下拉列表插入至 body 元素不应该也生效吗？可知，弹窗框是在组件内容之外了，所以在组件内操作的样式没有对弹窗框生效。我想对阴影进行修改，但是很是纳闷，各种标签选择器都不生效，很奇怪。把这个属性改为false，成功了！带着疑问问了带我实习的师傅，发现了这个属性。而改为false之后就成为下面的效果了。它和我们组件的内容成为兄弟关系了！
element-plus踩坑，popover消失
AloneQi的博客
03-11 1771
teleported：控制是否将颜色选择器的 DOM 结构插入到 body 标签下，默认是 true，这里设置为 false 表示保留在父级元素内。解决方法：在取色器上添加。
vue3.0(十五)内置组件Teleport和Suspense
chengcheng9876的博客
06-24 1275
vue3.0(十五)内置组件Teleport和Suspense [Vue warn]: Failed to locate Teleport target with selector ".className". Note the target element must exist before the component is mounted - i.e. the target cannot be rendere
【深入vue3 新特性: teleport 使用与讲解】
从今年开始写写博客~~
01-21 1895
teleport 是内置组件，可以直接在模板中使用，无需注册。 可以被打包工具 tree-shake。所以它们只会在被使用的时候被引入。 需要直接主动访问(获取)它们的场景，也可以将它们显性导入。 props to - string ：必传 挂载的目标，只能是父级标签。兄弟、子级都会报错。 挂载目标必须是有效的查询选择器或 HTMLElement disabled - boolean ：非必传 是否禁用。true则挂载到目标节点下，false为当前位置。 ..
ElementPlus 中el-select自定义指令实现触底加载请求options数据
qq_54548545的博客
08-02 1733
ElementPlus 中el-select自定义指令实现触底加载请求options数据/ 不插入body时，以下方式可获取元素// 插入body时，需要以document.querySelector('.el-scrollbar__wrap')获取
teleported
03-28
在 Vue 生态中，`Teleport`（或 Element Plus 中的 `teleported` 属性）是**解决组件渲染位置与 DOM 层级隔离**的核心技术。以下是其核心逻辑与应用场景： --- #### **一、Teleport 核心原理** ![Teleport 工作...
记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑
m0_67401761的博客
03-07 4530
事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。 于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和ele
Vue内置组件：teleport和transition组件
前端御书房
11-11 895
该组件可以将指定内容渲染到特定容器中，而不受 DOM 层级的限制。
【elementplus】body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
bbt953的博客
07-12 3496
body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
element-plus popover的z-index问题
DBXXY的博客
05-23 2686
popover的z-index问题 因为popover的z-index无法自动增加，导致打开对话框，组件显示无法正常显示 解决办法 将popover的teleported改为false即可 解决过程 版本elementui-plus 2.1.9 第一次打开对话框时可以正常显示 第二次打开对话框时发现 popover 在dialog下面 于是控制台查看这两个组件的z-index，发现dialog的z-index正常(每次打开+1)，而popover的z-index却保持不变，所以造成了这个原因，查看e
使用Element-plus时，控制台报错popper-append-to-body is about to be deprecated in version 2.3.0
qq_43730272的博客
11-06 1755
组件中的 “popper-append-to-body” 属性在 2.3.0 版本中被弃用。
el-select下拉框在弹框里面错位
qq_37485170的博客
01-07 457
组件所在的父容器中。这样做的好处是可以避免下拉菜单被父容器的样式或布局所影响，确保下拉菜单能够正确地显示在屏幕上的合适位置。时，下拉菜单将会被 "传送"（teleported）到 body 的直接子元素中，而不是。，这意味着下拉菜单将不会被传送到 body 的直接子元素中，而是会渲染在。Element Plus 是一个基于 Vue 3 的组件库，组件的下拉菜单的渲染位置，从而避免一些潜在的布局问题。是其中一个用于选择器的组件。属性用于控制下拉菜单的渲染位置。在这个示例中，我们将。组件所在的父容器中。
vue3 + element-plus 使用Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-30 7892
vue3 + element-plus 使用 Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
element 中select下拉框和el-popover下拉框 位置偏移的情况
逆风优雅的博客
07-28 7526
在el-select中添加teleported="false"既可解决。同样添加teleported='false'
修改el-select和el-input样式；修改element-plus的下拉框el-select样式；修改placeholder样式
热门推荐
i_am_a_div的博客
08-10 1万+
修改el-select样式；修改element-plus的下拉框el-select样式
Element-PLUS下拉框、日期组件、下拉菜单定位问题 element-plus下拉框组件定位问题 element-plus日期组件定位问题
半只
08-27 946
Element-PLUS 下拉框、日期、下拉菜单等组件使用的都是 Popover，在组件中增加。属性，所有Popover相关的组件都可以参考下面示例解决。
element DateTimePicker teleported
最新发布
03-29
### 关于 Element DateTimePicker 组件 Teleported 的解决方案 Element Plus 中的 `DateTimePicker` 组件默认会通过 `teleport` 将弹窗内容渲染到页面的 `<body>` 标签下，这可能会导致一些布局问题或者与其他样式冲突的情况。如果希望禁用这种行为或将 teleport 的目标自定义化，可以通过设置 `teleported` 属性来实现。 #### 解决方案一：禁用 Teleport 可以将 `teleported` 设置为 `false` 来完全禁用该功能。这样，弹窗的内容将会作为子节点直接附加在其父容器中，而不是移动到 `<body>` 下。 ```vue <el-date-picker v-model="value" type="datetime" :teleported="false" /> ``` 此方法适用于不需要特殊定位逻辑的场景[^1]。 --- #### 解决方案二：指定 Teleport 目标 如果仍然需要使用 `teleport` 功能但想将其挂载到其他 DOM 节点上，则可以通过 `teleport` 属性传递一个 CSS 选择器字符串或实际的 DOM 元素对象。 例如： ```vue <el-date-picker v-model="value" type="datetime" teleport="#custom-target" /> ``` 在此情况下，需确保页面中有对应的 DOM 容器存在，比如： ```html <div id="custom-target"></div> ``` 这种方式适合需要更灵活控制弹窗位置的需求[^2]。 --- #### 解决方案三：调整样式以适应 Teleport 行为 当无法更改组件内部结构时，可通过外部样式调整解决潜在的问题。例如，某些布局可能因 teleport 导致 z-index 或者相对定位异常，此时可尝试增加覆盖层的优先级。 示例代码如下： ```css /* 提升 DatePicker 弹框的显示层级 */ .el-popper { z-index: 9999 !important; } ``` 另外需要注意的是，由于 teleport 后元素脱离了原有上下文环境，部分依赖父级样式的属性（如 padding/margin）可能失效，因此建议显式声明这些值[^3]。 --- #### 处理快捷选项与时间范围限制中的错误 对于提到的 shortcuts 配置仅作用于当前时间 (`new Date()`) 的情况以及时间跨度计算误差 (-8.64e7)，推荐重新设计 shortcut 方法并校验最终选定区间是否合法。下面给出一段修正后的例子： ```javascript const shortcuts = [ { text: '最近一周', value: () => { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); // 减去七天毫秒数 return [start, end]; }, }, ]; // 数据验证函数 function validateTimeRange([startTime, endTime]) { if (!startTime || !endTime) return false; // 确保结束时间大于等于起始时间 if (endTime < startTime) { console.error('结束时间不能早于开始时间'); return false; } return true; } if (validateTimeRange(this.crud.query.controlStartTimeStr)) { this.crud.query.controlStartTime1 = new Date(this.crud.query.controlStartTimeStr[0]); this.crud.query.controlStartTime2 = new Date(this.crud.query.controlStartTimeStr[1]); } else { this.crud.query.controlStartTime1 = ''; this.crud.query.controlStartTime2 = ''; } ``` 上述脚本不仅修复了原始逻辑缺陷，还增强了鲁棒性[^4]。 --- ### 总结 综上所述，针对 Element DateTimePicker 的 teleported 问题提供了三种主要应对策略——关闭特性、定制目标区域或是优化现有表现形式；与此同时解决了快捷项设定局限性和跨日时段选取矛盾之处。具体采用哪种方式取决于项目的实际情况和个人偏好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值