VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改

简介: VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改

问题:局部全屏后el-popover弹出框失效
解决方法:

<el-popover
          placement="bottom"
          :append-to-body="false"//禁止内容追加至body即可
          width="200"
          trigger="hover"
        >
          <div> 雷达图指标解释说明:<br>
            业务量:代表司机近一年内运输收入的归一化数值;<br>
            活跃率:代表司机近一年接单次数的归一化数值;<br>
            持续性:代表司机距离最近一次接单天数归一化数值;<br>
            工作量:代表司机近一年运输货物重量的归一化数值。</div>
          <i slot="reference" class="el-icon-question icon" />
        </el-popover>

el-popover弹框背景及小箭头样式修改:

<style>//注意:不要加scoped
  .el-popover{
      background: rgba(43,67,115,0.8);
      color: #fff;
      border: none;
  }
  .el-popover[x-placement^=bottom] .popper__arrow{
        border-bottom-color: rgba(43,67,115,0.5);
    }
  .el-popover[x-placement^=bottom] .popper__arrow::after{
        border-bottom-color: rgba(43,67,115,0.5);
    }
</style>

效果图(全屏状态下):
在这里插入图片描述

相关文章
|
11天前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
22 5
|
12天前
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
13 3
|
10天前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
16 1
|
11天前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
23 1
|
12天前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
13 1
|
12天前
|
前端开发 JavaScript
vue + element-UI 图片压缩canvas【详解】(含完整demo)
vue + element-UI 图片压缩canvas【详解】(含完整demo)
18 1
|
13天前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
24 1
|
21天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
21 6
|
3天前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
7 0
Vue3使用element-plus图标,局部引入写法
Vue3使用element-plus图标,局部引入写法