element ui el-popover 样式修改不生效解决方法

最新推荐文章于 2024-05-28 19:12:47 发布
最新推荐文章于 2024-05-28 19:12:47 发布
阅读量8.4k 收藏 14
点赞数 15
分类专栏： el-popover element ui 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java123_PB/article/details/112613477
版权

el-popover 样式修改不生效解决方法

我们在使用element 的el-popover 组件时，会发现 自己对el-popover 写的样式不起作用，甚至使用>>> /deep/ 样式穿透都不起作用， 这是因为 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style

解决方法：

需要在 当前vue 文件中，再重新定义一个style , 这个style 不能有 scoped 标记
然后把要对el-popover 设置的样式放在 这个style中，
具体做法参考下图
在这里插入图片描述
具体的el-popover样式代码
在这里插入图片描述

页面效果
在这里插入图片描述
红色标记的说明我设置的样式生效了。

最后觉得有用的，可以点赞一下。

java123_PB
关注
  • 15
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
element-ui-vue2-el-popover-trigger为manual时的显示与隐藏处理-typescript实例
天河书阁 - VicRestart
06-20 1535
该方案一般用于处理在默认情况下，在Popover中单击再打开新的popover元素时会导致外部的popover元素消失，所以简单粗暴的用下面方式进行处理了一下。
对于popover里面的div样式无法修改的问题
qq_41083105的博客
11-26 1176
（巨坑，找了好久解决办法！） 原因分析：因为element-ui的组件与App.vue是平级的，所以在引用了element-ui组件的vue文件（vue组件）中的style中直接修改element-ui比如popover的样式是无效的 解决办法：把样式直接写到App.vue中就可以了，注意，如果有多个popover组件，最好用poper-class，这样就能根据不同的popover组件设置样式了 ...
Debug-012-el-popover 使用 doClose() 关闭窗口不生效的处理方案
最新发布
LM0916的博客
05-28 1021
这个方法是可以替代v-model="visible"来控制显示隐藏的（显示用doShow()这个方法）只要还是因为是在列表中，内容比较多，感觉用不了这个动态绑定v-model='visible + scope.row.id' 这种写法，但我记得好像失败了，最终选择了用doClose()的方案。看了好几篇博文，基本用的都是一种方法，但是他们给出的原因都是表格懒加载导致，可是我也没加这个属性，所以不能说服我，还说VUE不能检测到ref的值变化 不能触发视图更新（这个感觉靠点谱，但是视频1为什么行呢？
vue中el-popover的使用
热门推荐
青春不打烊的博客
05-25 2万+
1.trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus和manual。对于触发 Popover 的元素，有两种写法：使用slot="reference"的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。 <template> <div class="listcontent"> <el-row v-for="(item,index) in datalist" :k...
popover插件使用
sayoko06的博客
11-27 1054
贴上代码，回顾用，第一段js是实现点击弹出框其他地方弹出框隐藏的js。 提供官方popover API链接http://getbootstrap.com/docs/4.0/components/popovers/ //点击popover其他地方，就隐藏弹出框 $('body').click(function (event) { var target = $(event.target)...
element el-popover避坑
ljjpaopao的博客
04-07 244
当修改v-model所绑定的值为true时，外部的display：noone消失，内部的还存在才导致了elpopover不显示。最后通过反复的尝试，查看别的资料才找到了解决方法，当修改popovervisible为true后，再调用elpopover中的doShow，doHide方法。当前我的需求为点击图片上任意一标点时出现el-popover对改标点进行编辑等操作，所以采用的是manual方式，但是按照原来的代码一直有一个问题就是，明明所绑定的v-model已经为true，但是popover一直不显示。
jquery弹出悬浮插件webui-popover.zip
07-04
jQuery弹出悬浮插件WebUI-Popover就是这样一款轻量级的解决方案，它为开发者提供了便捷的方式来创建功能丰富的提示和弹出窗口。下面，我们将深入探讨这款插件的核心特性、安装步骤以及使用方法。 WebUI-Popover是...
react-popover：一个用于React的智能popover组件
02-26
目前尚无计划使用向后移植的修补程序来支持该库的较早版本，并且不欢迎为此目的使用PR，因为这会增加作者的维护成本。 安装 yarn add react-popover 例子 看看。 API export default Popover(props, target) props ...
material-ui-popup-state:通用Material-UI菜单，Popover和Popper用例的样板
05-13
目录 绑定功能usePopupState usePopupState道具usePopupState返回值渲染道具示例菜单弹窗鼠标悬停互动波普尔渲染道具API 绑定功能PopupState道具在bindHover使用Popover和Menu 安装npm install --save material-ui-...
jquery弹出悬浮插件webui-popover特效代码
03-20
**jQuery弹出悬浮插件WebUI-Popover详解** 在网页设计中，为了提供更好的用户体验，经常需要使用到各种交互式元素，其中弹出悬浮窗口就是一种常见的功能。`jQuery WebUI-Popover`插件是一款高效且轻量级的工具提示...
react-text-selection-popover:基于选择的文本UI变得容易
05-01
安装npm install --save react-text-selection-popover用法import css from '@emotion/css'< Popover xss=removed xss=removed> { if ( clientRect == null || isCollapsed ) return null // I'm using emotion for ...
【Vue】使用elementPlus的table时,实现自定义tooltip效果，单行显示，超出则显示省略号，鼠标移入后，当文字数量大于20则换行自定义展示的tooltip
余浩的博客
08-15 4581
使用elementPlus的table时，实现自定义show-overflow-tooltip效果，文字在table中单行显示，超出宽度则显示省略号，鼠标移入后，当文字为30个字以内的时候单行显示tooltip，超出30个字则显示可以换行自定义展示的tooltip。
vue element ui el-popover 样式修改不生效解决方法
qq_37916164的博客
08-06 6370
这四种样式穿透都不起作用， 这是因为 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style。在使用element 的el-popover 组件时，会发现自己对el-popover 写的样式不起作用，甚至连使用。首先给它添加一个特定的类名 , 千万别重复 , 语义命名以免样式污染。在当前文件样式中 不加scoped写一份。...
改变el-popover的背景色
m0_46129241的博客
09-28 7855
HTML: <el-popover popper-class="popoverBackB" placement="bottom" width="200" triggre="click"> <p style="color:#fff;">改变popover的背景色</p> <el-button slot="reference" icon="el-icon-search" circle>
在动态表格中使用el-popver实现类似与el-select
LuckBaby_Yun的博客
08-04 712
1.使用el-popover的trigger="manual"手动激活导致弹框卡顿；最终使用trigger="click"激活；但页面设置disable时点击之后弹框依旧会弹出，可使用css进行隐藏，修改el-popover的样式不能写在scoped里面；3.表格如果有被固定列，el-popover会弹出多个，查找了很多解决方法，目前暂未解决，我这里将固定列取消了。注：因为是在table表格中进行使用，所以在绑定ref时要加上下标让其唯一。（1）.进入页面监听页面的滚动事件。（2）.关闭弹框页面销毁监听。
修改el-select或者el-input样式失效
lanmy_dl的博客
08-02 1180
因为在页面的时候我取消样勾选就满意黑色，所以以为设置的是none，结果代码里面设置none是白色，然后一直以为没有生效，当改成自己想要的颜色就可以了。可是一直不生效，最初看到说:popper-append-to-body="false"设置为false，没用。下午改el-input和el-select这两个的样式真的烦，，，还不如写原生标签了。，注意没有空格，然后按照所寻找的样式选择器放进来就可以了。我已经在样式器中挨着挨着去找了，把层级的类都写下来了。后面感觉就是样式穿透的问题，样式使用的是sass。
/deep/仍无法修改el-popover样式
m0_65915285的博客
01-04 913
记录通过深度选择器还无法修改样式的原因及解决办法
Element-UI中Select选择器详解
All___Blue的博客
11-30 5604
最近开发的后台管理系统项目采用Vue+Element-UI技术架构，在使用Elment-UI中Select组件的时候遇到了比较多的操作难题，官网上关于这个组件的使用文档介绍的不是很详细，仅仅提供了一些基本用法，很多拓展场景都没有涉及到，在查阅了大量资料之后终于将目前的需求都完美解决了，这里整理一些Select组件的使用方案，希望能帮到有同样需求的同学。 项目已上传github，欢迎大家下载交流。 前端项目地址：https://github.com/Hanxueqing/Element-select 项目运行
Vue3 样式穿透 Element Plus el-popover样式修改 动态控制el-popover显示
weixin_55039681的博客
02-12 1万+
前言 这个问题从2020年小年夜一直卡到2021年大年初一才解决，虽然查了很多资料，但是没有一个能解决的。主要原因有2个： 1.本人是新手，Vue学习使用时间不长，而且用的是最新的Vue3 2.用了Element plus，而不是Element UI 问题描述 我想实现如下一个功能，在input上方弹出一个popover窗口提示，并且将input和popover边框全变成红色，如下图： 第一个小坑：弹出popover窗口提示 首先根据element plus指南，做出如下效果： 本以为很简单，结果手动激
使用element ui el-popover， 鼠标移动上去，满足条件触发
06-08
好的，您的问题是如何在使用 element ui el-popover 组件时，在鼠标移动上去满足某些条件后触发弹出框呢？ 首先，您可以使用 `v-if` 或 `v-show` 指令来控制弹出框的显示与隐藏，然后在触发 el-popover 的元素上添加 `@mousemove` 事件监听器，监听鼠标移动事件，当满足某些条件时，将 `v-if` 或 `v-show` 绑定的值设置为 `true`，即可触发弹出框的显示。 下面是一个简单的示例代码： ```html <template> <div> <div @mousemove="handleMouseMove">鼠标移动到我上面</div> <el-popover v-if="showPopover" placement="top"> <p>这是弹出框的内容</p> </el-popover> </div> </template> <script> export default { data() { return { showPopover: false, }; }, methods: { handleMouseMove(event) { // 判断条件，例如鼠标移动到元素上面一定距离后触发 if (event.clientY < 50) { this.showPopover = true; } else { this.showPopover = false; } }, }, }; </script> ``` 以上代码中，我们在 `handleMouseMove` 方法中判断鼠标纵坐标是否小于 50，如果是，则将 `showPopover` 设置为 `true`，否则设置为 `false`，从而控制 el-popover 组件的显示与隐藏。 希望这个回答能够帮到您！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值