el-popover 样式修改

2023-11-15

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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-popover 样式修改 的相关文章

  • 滚动时多个图像淡出

    我有一个页面 在每个导航点上 网站中间的图像通过淡入淡出来改变颜色 我设法淡入 active3 fadeIn 2000 不过 我遇到了再次淡出它的问题 让我尝试解释一下 我有 5 个导航点和 5 个不同的图像 如果我 例如 从第一个导航点滚
  • 单击后按键不会删除过渡

    我认为问题可能出在const 音频 document querySelector audio data key e keyCode const key document querySelector key data key e keyCod
  • 移动设备中的 CSS 响应式设计不适用于 uc 浏览器和 Opera Mini [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 UC 和 Opera Min 浏览器上的响应式网站无法正常工作 我们使用媒体查询进行响应式设计 我搜索了一下 发现了一些
  • 如何使用CSS缩进多级select optgroup?

    只是试图通过嵌套深度缩进 optgroup 块 我尝试了一般margin left规则 嵌套元素然后尝试应用相同的规则 尝试过padding left 这样的缩进可能吗 看起来很简单 P 在下面的示例中 标记为 client2 a 的 op
  • 在 R 中修改传单弹出窗口

    我想修改 R 中传单弹出窗口的外观 帮助文件指出 in the popupOptions 函数需要 传递给底层 Javascript 对象构造函数的额外选项 In 这个例子 https rstudio github io leaflet p
  • 将 Bootstrap CSS 中的列表居中[重复]

    这个问题在这里已经有答案了 重复报告后编辑 抱歉 我认为建议的重复项实际上可能是重复项 我先尝试了一下 但它对我不起作用 因此出现了一个新问题 再次查看新的建议答案后 我意识到我的问题可能与我正在使用的工具 codepen io 的开箱即用
  • CSS3 变换:IE 中的缩放

    我想使用CSS3属性transform scale div transform scale 0 5 0 5 有没有办法在 Internet Explorer 8 及更低版本中模仿这个 可能与filter或者 JavaScript 解决方案
  • Bootstrap

    我正在尝试使用 Bootstrap 构建一个网站 到目前为止 一切都按计划进行 我想要一个固定的导航栏 并且我正在使用内置函数 div class navbar navbar fixed top 这很棒 正是我所需要的 但我希望导航和标题从
  • 固定 Div 与静态 div 的滚动条重叠

    我无法按照我想要的方式设计布局 我有一个内容区 content 您可以在示例图像中看到的灰色 里面有一个黄色元素 这个div是position static height 100 现在我有一个 left paneldiv 也 与positi
  • 如何在 CSS 中将 RadioButton 图标样式设置为无(在 Flex 3 中)?

    您可以通过在 CSS 中设置以下值来在 Flex 中设置 RadioButton 的外观 upSkin Embed overSkin Embed ownSkin Embed disabledSkin Embed selectedUpSkin
  • 如何使用 CSS 或 jQuery 设置第一个和最后一个 li 的样式?

    我如何设计第一个 顶级 li和最后一个 顶层 li使用 CSS 还是 jQuery 我正在使用 CSS 设置第一个li但它也是造型第一li在每个中学阶段ul 那么我怎样才能让它只设置样式li其中包含 Main 1 最后一个包含 Main 6
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h
  • 如何在mozilla firefox上获得线性渐变效果

    我正在使用下面的CSS来获得线性渐变效果 但它在mozilla firefox中不起作用 你们中的任何人都知道它吗 请帮助在firefox中也获得相同的效果 CSS 是 background image webkit linear grad
  • 使用 z-index 的链接在 Firefox 和 IE 中无法单击,即使它位于顶部

    我试图让文本链接出现在部分透明图像的顶部 而该图像又位于纯色背景的顶部 我希望在打印页面时打印链接文本和图像 但不打印彩色背景 这就是为什么我不使用背景图财产 问题在于 虽然链接显示在图像顶部 并且图像按需要显示在背景顶部 但无法单击该链接
  • 仅在 Safari 中位于 div 外部的文本

    我有这个错误 让一些文本出现在右侧 div 之外的几个像素处 奇怪的是 这种情况只发生在 Safari 中 我以前从未见过它 它只是我使用过的常规 HTML CSS 我在互联网上环顾四周 但找不到完全相同的问题 由于高度固定 只有一些内容在
  • 如何在同一个

    中设置两种不同的字体大小

    我有一段 HTML 代码 我一直坚持不下去 我怎样才能将这个文本的第一部分的字体大小设置为 20px 以及后面的文本 br 标签字体大小为 15px 或者 如果我做的完全错误 我该如何做而不将它们放在不同的标签中 p Los Santos
  • 通过 Javascript 更改 Webkit 属性?

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它
  • 使用位置的最大缺点是什么:绝对和顶部/左侧超过浮动和边距+填充,如果网站是固定宽度(970px),居中?

    使用CSS定位最大的缺点是什么 来自 Dreamweaver AP 部门 http livedocs adobe com en US Dreamweaver 9 0 help html content WScbb6b82af55445948
  • HTML/CSS:页面左侧的导航栏

    我发现创建这样具有良好语义的布局很尴尬 左侧是大约 150 像素宽的列 其中包含导航元素 我想将网站这部分的 HTML 放在 HTML 代码的开头 然后有一个简单的方法来强制页面的其余部分不侵占左侧的区域 150 像素列 我考虑过一些选择

随机推荐

  • 怎么开发企业微信小程序?

    企业微信小程序是一种基于微信平台的小程序 主要用于企业内部管理和沟通 开发企业微信小程序可以帮助企业提高工作效率和协同能力 同时也能够提升企业形象和品牌价值 本文将介绍如何使用小程序制作工具来开发企业微信小程序 一 了解企业微信小程序的优势
  • DevOps系列之 —— 持续开发与集成(五)华为云 DevCloud 代码托管服务及 CloudIDE

    DevOps系列之 DevOps概览 一 软件产业和交付模式发展趋势 DevOps系列之 DevOps概览 二 新型软件技术及交付模式 DevOps系列之 DevOps概览 三 DevCloud HE2E DevOps 框架及其主要服务 D
  • Linux基本指令(ls、pwd、cd、touch、mkdir、rmdir、rm、man、cp、mv、cat、tac、more、less)

    在Linux中文件后缀与文件类型无关 一 ls 功能 对于目录 该命令列出该目录下的所有子目录与文件 对于文件 将列出文件名以及其他信息 1 ls a 列出目录下的所有文件 包括以 开头的隐含文件 目录 ls 与ls a 以 开头是隐藏文件
  • could not create the java virtual machine

    今天早上突然打开不了myeclipse eclipse 每次启动都报错 could not create the java virtual machine 开始以为是java虚拟机出了问题 于是卸了重装还是出现如此问题 接着到网上查找相关资
  • 酒店评论情感分析,亲妈级教程

    酒店评论情感分析 采集与分词篇 开篇吐槽一下下 类似携程这种生活类网站 还有电商类网站 不是驻守被爬的城墙内就是在反爬的道路上行走 不断的更新加密 批量化的采集不断破解并升级程式 并在网络之上布施教程 小白们熬夜拼命的学习 做一个流水线般的
  • Linux Shell函数返回值

    Shell函数返回值 一般有3种方式 return argv echo 1 return 语句 shell函数的返回值 可以和其他语言的返回值一样 通过return语句返回 示例 bin bash function mytest echo
  • PyTorch模型导出到ONNX文件示例(LeNet-5)

    从PyTorch模型导出到ONNX文件是通过调用PyTorch的torch onnx export接口实现 torch onnx export 如果pytorch模型既不是torch jit ScriptModule也不是orch jit
  • shiro反序列化漏洞Shiro-550/Shiro-721反序列化

    文章目录 shiro反序列化漏洞 Shiro 550反序列化漏洞 CVE 2016 4437 漏洞简介 漏洞原理 Shiro 721反序列化漏洞 CVE 2019 12422 Shiro550和Shiro721的区别是什么 漏洞指纹 漏洞介
  • postman-常见问题解决方案记录

    1 Response body Containing string为中文 Response body Containing string 为中文时 转换为unicode编码 并添加转义符 2 get方式与post请求使用环境变量 post方
  • ctfshow web2

    ctfshow web2 writeup 这是本人第一次写blog 有不好的地方希望大家多多指出 从此开始踏上了网安的不归路 成为了一只web狗 从题目可以看出这是一道sql注入的题 示例 pandas 是基于NumPy 的一种工具 该工具
  • 看懂Oracle执行计划

    略有所知 也来总结一下自己最近所学 不定时更新ing 一 什么是Oracle执行计划 执行计划是一条查询语句在Oracle中的执行过程或访问路径的描述 二 怎样查看Oracle执行计划 PLSQL远程连接的公司数据库 所以以PLSQL为例
  • Webots安装和教程推荐

    安装与推荐 软件介绍 Webots是一款专业的物理仿真软件 被广泛运用在机器人 智能车仿真实践控制算法中 2018年12月该软件宣布开源 Webots最初采用C进行编程 至今已经实现提供C C Python Java Matlab接口的AP
  • JS setAttribute()方法:设置元素的属性值

    在 JavaScript 中 使用元素的 setAttribute 方法可以设置元素的属性值 用法如下 setAttribute name value 参数 name 和 value 分别表示属性名称和属性值 属性名和属性值必须以字符串的形
  • 用户政策和隐私协议

    杭州宜果送信息科技有限公司 以下简称 宜果送 重视用户的隐私 宜果送隐私政策 更新日期 2022年1月18日 提示条款 您的信任对我们非常重要 我们深知个人信息对您的重要性 我们将按法律法规要求 采取相应安全保护措施 尽力保护您的个人信息安
  • 隔离式栅极驱动器输入级对电机驱动应用的影响

    介绍 在电机驱动应用中为功率级选择隔离式栅极驱动器时 您有多种选择 栅极驱动器可简单可复杂 具有集成米勒箝位 分离输出或绝缘栅双极晶体管 IGBT 发射极的欠压 UVLO 锁定参考等功能 输入级有两个选项 电压输入级或电流输入级 在本文中
  • Visual Studio问题汇总

    合并两个vs解决方案 不能 下载别人的vs程序易出现sdk不符合等问题 项目右键属性 目标版本平台 平台工具集 都改为自己已有的就行了 还要注意配置和平台对应哦 1 问题 Callback 模板 从属名称的使用必须以模板为前缀 解决 项目右
  • 大一Python期末复习笔记

    目录 前言 一 输出格式控制 多行输出 不换行输出 精度保留和对齐 format f 二 嵌套 嵌套循环 for while 嵌套列表 字典 三 列表与字符串 添加元素 切片访问与逆序 join count find index 删除与替换
  • js闭包——简单例子

    闭包 当内部函数被保存到外部时 将生成闭包 闭包会导致原有的作用域链不释放 造成内存泄漏 如下两个例子 function test var tmp 100 function a console log tmp return a 把里面的函数
  • 4.Vue3计算属性computed实现原理

    computed实现原理 computed特性 computed可以传入一个函数 也可以传入一个对象 带有get和set方法 计算属性返回一个计算值 该值通过value属性访问 当参与计算的数据发生改变 则重新计算 不发生改变 则直接返回之
  • el-popover 样式修改

    el popover 样式修改 通过popper class绑定自定义类名popperOptions 注意popperOptions需放在样式的根文件中 原始样式 更改后的样式