使用Element-plus时，控制台报错popper-append-to-body is about to be deprecated in version 2.3.0

已于 2023-11-08 17:44:04 修改
阅读量584 收藏
点赞数 1
文章标签： vue.js 前端 vscode javascript 开发语言
于 2023-11-06 13:53:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43730272/article/details/134244623
版权

使用Element-plus时，控制台报错popper-append-to-body is about to be deprecated in version 2.3.0

原因

组件中的 “popper-append-to-body” 属性在 2.3.0 版本中被弃用

解决方法

将 “popper-append-to-body” 属性替换为 “teleported” 属性。
popper-append-to-body：是否将弹出菜单插入至 body 元素。 在菜单的定位出现问题时，可尝试修改该属性

<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body></el-sub-menu>

teleported： 是否将 popup 的下拉列表插入至 body 元素

<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported></el-sub-menu>
柒@宝儿姐
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite-vue-admin::party_popper::party_popper:使用Vite + Vue3 + TypeScript + Element-plus + Mock开发的后台管理系统:party_popper::party_popper:
05-12
Vite-Vue-Admin 介绍 Cli 配置 vue3.X vuex@4 vue-router@4 vite@2 typescript mock 内置 element-plus 二开封装 upload-file (文件上传，支持指定文件格式，文件大小) powerful-table (多功能表格组件) 自定义配置 由于 vite 不支持 scss export 的导出，无法在运行中修改全局颜色，但可以在代码中修改 菜单栏颜色配置 style > menus.scss 全局主题颜色 style > index.scss 启用 mock 只需在对应运行环境下的 .env.XX 修改 VITE_MOCK 为 true 项目设置 注意事项 默认是开发版本和发行版本都是使用 mock 发行版本如需禁用 mock 请将 main.ts 文件下的如下代码取消注释 并且找到 .env.producti
详解如何修改el-select的样式：popper-append-to-body和popper-class
11-21
如何修改elementUI提供的el-select组件的样式 网上有很多关于这个的解决方式： ...然后就去官网看了下是否有属性可以控制它，果然有这么一号人物popper-append-to-body： 默认是true，改成false就可以起作用
Element 动态tab中下拉框定位 popper-append-to-body使用后弹出框看不到
weixin_38923162的博客
03-15 1983
popper-append-to-body： 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false。开发时在使用动态tab增加行时添加的下拉框、时间框增加该属性后弹出框看不到了，分析发现是因为行高度不够导致内容自动隐藏。解决方法是重新编写css。
element-plus下拉框和输入框宽度不一致，:popper-append-to-body=“false“失效
Liberty_yes的博客
03-23 366
原因控制台看到下拉项的`DOM`元素时插入到`body`里面了，使用`:popper-append-to-body="false"`发现已经废弃，最后发现替换成`:teleported="false"`
使用element ui 对话框嵌套遮盖层错误问题
weixin_45243726的博客
06-28 289
append-to-body，给子对话框加上这个属性，问题就解决了
Vue中的Element-plus的Select选择器下拉框样式如果自定义修改（popper-append-to-body(已废弃)的平替popper-class属性的解决方法）
weixin_47336389的博客
01-04 6553
问题：1、无法使用什么深度修改样式，都不会起到作用，就是因为压根就没挂载在#app当中（怎么修改都无用）2、使用全局index.vue中修改样式（污染全局并且我不会）3、官方文档以及所有的百度解决方案都是使用popper-append-to-body（但是被废弃了）4、历经九九八一难再次感慨下拉框样式终于可以自定义修改了 我哭（迫不及待分享给跟我一样的小伙伴们 ）
el-select如何改变样式 （:popper-append-to-body=“false“）
Alone_Endeavor的博客
06-01 5797
popper-append-to-body是一个Popper.js库的选项，用于指定Popper元素是否应该附加到文档的body元素上。通过Element-ui的Select Attributes可发现，有这样一个属性 popper-append-to-body。在使用el-select的时候，其样式会按照Elementui自带的默认样式为基准；.el-select-dropdown__item:hover——hover时的样式。.el-select-dropdown__item——单个选项的样式修改。
[elementui]控制台报错 opper-append-to-body is about to be deprecated
qubes的专栏
03-01 2555
环境：vue3 element-plus控制台报错 elementui。
解决 ElementPlusError 错误：迎接 ElementPlus 2.3.0 版本更新的新变化
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
12-05 875
探索 ElementPlus 组件库中即将弃用的 popper-append-to-body 属性，本文将引导您如何有效处理 ElementPlusError 错误，并顺利迁移至 ElementPlus 2.3.0 版本。了解这个错误的背景、更新代码的必要性以及使用新的 teleported 属性来优化弹出框定位。通过本文，您将能够迎接 ElementPlus 新版本的变化，确保您的应用程序能够持续稳定运行。
element-plus type.text is about to be deprecated in version 3.0.0, please use link instead.
热门推荐
一个喜欢什么都研究一下的小小后端程序员
11-05 1万+
error.ts?aa5c:14 ElementPlusError: [props] [API] type.text is about to be deprecated in version 3.0.0, please use link instead.
【无标题】VUE + element 二次封装
YangShuaiPlus的博客
02-07 784
form表单封装 <template> <!-- form表单封装 yangshuai--> <el-form ref="ruleForm" :model="props.SeachForm" :rules="props.rules" label-width="120px" class="demo-ruleForm" style="margin-bottom: 70px" > <el-row>
element-plus: el-tooltip 乱浮动，append-to 失效问题
qq_27936291的博客
11-15 5692
官方文档可能写有append-to这个属性，但是这个属性在实际开发中不存在，也就导致连续hover（el-tooltip）出现乱浮动的现象；查看源代码发现它只有append-to-body这个属性
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
vue3-element-admin::party_popper: 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin
08-04
:party_popper: 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 是一个后台前端解决方案，它基于 和 实现。使用了最新的前端技术栈 ，提供最基础的框架模型，可以帮助你...
vue-popper：基于VueJS popover组件的popper.js
02-06
推荐： : ，它将在发布到npm时立即反映最新版本。 您也可以在浏览npm软件包的源代码。 NPM npm install vue-popperjs --save 纱 yarn add vue-popperjs 凉亭 bower install vue-popperjs --save 开发设置 # ...
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 614
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 321
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 840
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue中的async
最新发布
三三木木七的博客
05-06 341
在使用 async 关键字声明的函数内部，可以使用 await 关键字来等待一个 Promise 对象解析。这样可以使代码更加清晰和易于理解，因为它们使异步代码看起来更像同步代码，避免了回调地狱。
element-plus的popper-append-to-body=false不起作用
05-23
在 Element Plus 中，`popper-append-to-body` 是用来控制弹出框（Popover、Tooltip 等）是否插入到 body 元素中。默认情况下，`popper-append-to-body` 的值为 `true`，表示弹出框会被插入到 body 元素中。 如果你设置了 `popper-append-to-body=false` 但是没有起作用，有可能是因为你使用的组件并不支持这个属性。请确认你使用的组件是否支持 `popper-append-to-body` 属性。 另外，如果你的组件是通过 `v-model` 或者 `:visible.sync` 来控制显示和隐藏的，需要注意以下几点： 1. 如果你是在组件的 `props` 中设置 `popper-append-to-body` 的值，那么你需要在使用组件时将该值传递给组件。 2. 如果你是在组件的 `data` 中设置 `popper-append-to-body` 的值，那么你需要在组件的 `mounted` 生命周期中将该值赋值给组件的 `props` 中。 示例代码如下： ``` <template> <el-popover :popper-append-to-body="popperAppendToBody" v-model="popoverVisible" :content="content" > <el-button slot="reference">click me</el-button> </el-popover> </template> <script> export default { data() { return { popoverVisible: false, popperAppendToBody: false, // 设置 popper-append-to-body 的值 content: 'This is content', } }, mounted() { this.$refs.popover.$props.popperAppendToBody = this.popperAppendToBody // 将 popper-append-to-body 赋值给 props }, } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值