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>

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

相关文章
|
8月前
|
JavaScript
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
308 2
|
3月前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
41 1
|
4月前
|
JavaScript
vue中组件的局部注册和全局注册
本文介绍了Vue中组件的局部注册和全局注册的方法,并通过示例代码展示了如何在特定组件或整个Vue应用中注册和使用自定义组件。
|
5月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
304 0
|
6月前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
85 1
|
7月前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
Vue3使用element-plus图标,局部引入写法
Vue3使用element-plus图标,局部引入写法
|
6月前
|
JavaScript
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
644 0
|
6月前
|
JavaScript
vue 手动/局部刷新组件
vue 手动/局部刷新组件
272 0
Vue3组件,注册全局组件和局部组件
Vue3组件,注册全局组件和局部组件

热门文章

最新文章