el-popover 样式修改_修改el-popover样式-程序员宅基地

技术标签： css vue

el-popover 样式修改通过popper-class绑定自定义类名popperOptions，
注意popperOptions需放在样式的根文件中
原始样式：
在这里插入图片描述
更改后的样式：

在这里插入图片描述

<el-popover
      width="300"
      trigger="hover"
      popper-class="popperOptions"
      placement="top-start"
   >
     <div class="operate-btn"  slot="reference">
       <el-badge :value="12" class="item">
         <i class="icon el-icon-chat-line-round"></i>
       </el-badge>
     </div>
     <span slot="default">
       你有99条未读消息，请及时查看
     </span>
 </el-popover>

.popperOptions[x-placement^=left] .popper__arrow::after{
    
  border-left-color: #EA4E3D;
}
.popperOptions[x-placement^=right] .popper__arrow::after{
    
  border-right-color: #EA4E3D;
}
.popperOptions[x-placement^=bottom] .popper__arrow::after{
    
  border-bottom-color: #EA4E3D;
}
.popperOptions[x-placement^=top] .popper__arrow::after{
    
  border-top-color: #EA4E3D;
}
.popperOptions {
    
  background-color: #EA4E3D;
  color: #FFFFFF;
  font-size: 18px;
  padding: 5px;
  border: #EA4E3D;
}

本文链接：https://blog.csdn.net/weixin_44980864/article/details/119774065

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Android IPC机制-程序员宅基地

文章浏览阅读917次，点赞18次，收藏11次。为了方便有学习需要的朋友，我把资料都整理成了视频教程（实际上比预期多花了不少精力）当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。无论你现在水平怎么样一定要持续学习没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！我希望每一个努力生活的IT工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

利用ode45求解含控制量并且控制量为离散点的动力学方程_ode函数离散-程序员宅基地

文章浏览阅读2k次，点赞5次，收藏14次。1、写出微分方程函数2、求解function dy=rigid(t,y)dy=zeros(3,1);dy(1)=y(2)*y(3);dy(2)=-y(1)*y(3);dy(3)=-0.51*y(1)*y(2);end%将微分方程写成函数形式，待调用options=odeset('RelTol',1e-4,'AbsTol',[1e-4 1e-4 1e-5]);[T Y]=ode45(@rigid,[0 12],[0 1 1],options);plot(T,Y(:,1),'-',T,Y_ode函数离散

Java中==和equals的区别-程序员宅基地

文章浏览阅读3.8w次，点赞41次，收藏180次。==操作符与equals方法的区别_java中==和equals的区别

flask-login-程序员宅基地

文章浏览阅读170次。创建扩展对象实例from flask_login import LoginManagerlogin_manager = LoginManager()login_manager.login_view = 'auth.login'# 上面这一句是设置登录视图的名称，如果一个未登录用户请求一个只有登录用户才能访问的视图，# 则闪现一条错误消息，并重定向到这里设置的登录视图。# 如果未设置..._python flask please log in to access this page

html怎么控制top值为0,关于vue滚动scrollTop 赋值一直为0问题-程序员宅基地

文章浏览阅读428次。Vue中document.body.scrollTop的值总为零的解决办法最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0但是发现document.body.scrollTop一直是0。查资料发现是DTD的问题。页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。页面没有DTD，即没指定DOCTYPE时，使用d..._滚动给scrolltop赋值

kingbase数据库安装教程（初步使用）（人大金仓）-程序员宅基地

文章浏览阅读2.1k次，点赞25次，收藏21次。人大金仓数据库管理系统KingbaseES（简称：金仓数据库或KingbaseES）是北京人大金仓信息技术股份有限公司自主研制开发的具有自主知识产权的通用关系型数据库管理系统。_kingbase

随便推点

Linux 命令【6】：cut_cut使用特殊字符为分隔符-程序员宅基地

文章浏览阅读141次。Linux 命令【6】：cut文章目录一、简介二、命令详解三、实例演示一、简介cut 命令是一个将文本按列进行切分的小工具，它可以指定分隔每列的定界符。二、命令详解命令格式：cut {选项} {文件名}选项：-b ：以字节为单位进行分割。这些字节位置将忽略多字节字符边界，除非也指定了 -n 标志。-c ：以字符为单位进行分割。-d ：自定义分隔符，默认为制表符。-f ：与-d一起使用，指定显示哪个区域。-n ：取消分割多字节字符。仅和 -b 标志一起使用。如果字符的最后一._cut使用特殊字符为分隔符