elementui的el-popover修改样式不生效的解决


Posted in Javascript onJune 30, 2021

在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式

项目中使用了el-popover,但是想修改一下样式,一直不成功,先来看一下官方文档怎么说的

elementui的el-popover修改样式不生效的解决

添加一个类名,string类型,ok,添加一个

<el-popover
    placement="right"
    width="400"
    trigger="hover"
    popper-class="my-popover"
    >

去设置样式

<style lang="scss" scoped>
	.my-popover{
		padding:20px;
	}
</style>

elementui的el-popover修改样式不生效的解决

结果就是没有设置成功!
是不是因为scoped,不加scoped再试一下!

<style>
my-popover{
    padding:10px 30px;
}
</style>

elementui的el-popover修改样式不生效的解决

还是没有效果!!!
经过疯狂试验以及网上搜索!
最终写法是这样,.el-popover.my-popover 这种格式,前缀是.el-popover ,不然不生效。且不能加上scoped

<style>
.el-popover.my-popover{
    padding:10px 30px;
}
</style>

elementui的el-popover修改样式不生效的解决

修改成功!

到此这篇关于elementui的el-popover修改样式不生效的解决的文章就介绍到这了,更多相关el-popover 样式不生效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
图片onload事件触发问题解决方法
2011/07/31 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Python通过len函数返回对象长度
2020/10/22 Python
比利时买床:Beter Bed
2017/12/06 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
销售总监工作职责
2013/11/21 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
团队拓展训练感想
2015/08/07 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技