el-popover怎么挂载在父元素,而不是body上;以及设置样式问题

news/2024/7/9 23:59:36 标签: 前端, vue, element

正文:

为el-popover添加配置项:

:append-to-body="false"
:popper-options="{
	boundariesElement: 'body',
	gpuAcceleration: true,
	positionFixed: true,
	preventOverflow: true
}"

此时如果你使用了scoped并需要添加样式,只需要在组件内添加样式即可,不需要到全局添加:

popper-class="weight-popper"
/deep/.weight-popper {...}

截图看效果:

在这里插入图片描述

注意:

因为el-popover本身自带一个绝对定位,需要给父组件添加相对定位,否则可能导致定位错乱。


http://www.niftyadmin.cn/n/1355203.html

相关文章

html跑马灯_Java之Redis队列+Websocket+定时器实现跑马灯实时刷新

1.业务描述这几天,公司有个业务,具体内容如下:在仪表盘banner区域滚动播放提示信息。也就是实现一个实时播放消息的跑马灯功能。播放的是一个任务内容(数据库有一张表pm_task)。跑马灯消息提示内容总共有四种:任务下发——P3(消息…

axios获取图片后,如何渲染到页面上?

axios获取图片后,如何渲染到页面上? 场景 由于某些图片,在获取的时候需要带上token之类的身份验证参数,所以没法直接将图片地址绑定在img标签的src上获取图片。 解决 获取并处理: this.axios.get(url, { response…

js控制浏览器全屏踩坑记录

需求 点击以下按钮后,页面进入全屏。 进入全屏后,按钮样式改变为 恢复非全屏时,按钮自动恢复。 难点 需求很简单,但是实际上手发现有几个难点: 1.浏览器在全屏状态下按F11和Esc可以退出全屏,且全屏状态…

o2oa二次开发比开发难吗_CAE二次开发的前景和讨论(附直播教程)

来源:CAE技术分享(CAE_Teaching)目前国内CAE技术在工程上的应用越来越多,在一些行业比如汽车等已经较为成熟,对于辅助工业生产有不可忽视的作用。国内由于各种原因,CAE技术的发展并没有跟随经济的迅速发展而蓬勃,但也在…

vue extends继承后修改template的解决方案

vue extends继承后怎么注入虚拟DOM节点 1.需求 使用extends继承一个组件并在上面做功能的修改和扩展,同时需要小小修改一部分的template。 2.问题 直接写template的话会将原本的模板全部覆盖掉,但是copy并重写一次template又做了很多无用功显得不够优…

python3解释器执行long(10)_Python3.X全栈-Day10-PycharmIDE初识及运算符、字符串的介绍...

01 python全栈s3 day10 上节内容回顾以及补充02 python全栈s3 day10 上周作业实现03 python全栈s3 day10 Pycharm的安装和使用04 python全栈s3 day10 Python 运算符(一)05 python全栈s3 day10 Python 运算符(二)06 python全栈s3 day10 Python 运算符以及总结07 python全栈…

css transition回调

css transition回调 需求 需要在一个css css transition执行完毕之后执行一个回调的方法。 解决 可以用window.addEventListener(‘transitionend’);监听到transition执行完毕。 存在的问题 当前页面中所有的transition执行完毕后都会触发该监听,使用的时候需…

python批量抢单_用Python完成毫秒级抢单,助你秒杀淘宝大单

目录:引言环境需求分析&前期准备淘宝购物流程回顾秒杀的实现代码梳理总结0 引言年中购物618大狂欢开始了,各大电商又开始了大力度的折扣促销,我们的小胖又给大家谋了一波福利,淘宝APP直接搜索:小胖发福利&#xff…