(element-ui)el-popover样式修改

最新推荐文章于 2024-04-07 15:00:46 发布

飘零未归人

最新推荐文章于 2024-04-07 15:00:46 发布

阅读量3.2k

点赞数

分类专栏： # 前端文章标签： elementui vue.js

本文链接：https://blog.csdn.net/qq_34484062/article/details/125225459

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

源代码：

 <el-popover class="menu-popover" placement="bottom" trigger="hover">
              <span slot="reference">组件管理</span>
            <el-menu-item index="1-1">服务管理</el-menu-item>
            <el-menu-item index="1-2">组件包管理</el-menu-item>
            <el-menu-item index="1-3">组件补丁管理</el-menu-item>
            <el-menu-item index="1-4">服务器管理</el-menu-item>
</el-popover>

style:

<style lang="less">
.head-top{
height: 20px;
background: rgba(71, 41, 33, 0.42);
}
.el-menu-div{
height: 60px;
left: 0;
background: rgb(191, 186, 184);
.el-menu-style{
left: 20%;
background: rgb(191, 186, 184);
.menu-popover{
width: 300px;
margin: 0;
padding: 0;
}
}
}

</style>

官方文档显示需要使用popper-class才才能配置：

修改后：

<el-popover popper-class="menu-popover" placement="bottom" trigger="hover">
              <span slot="reference">组件管理</span>
            <el-menu-item index="1-1">服务管理</el-menu-item>
            <el-menu-item index="1-2">组件包管理</el-menu-item>
            <el-menu-item index="1-3">组件补丁管理</el-menu-item>
            <el-menu-item index="1-4">服务器管理</el-menu-item>
</el-popover>

但是这样还是不行，最后发现，style配置需要在最外层：

<style lang="less">
.head-top{
  height: 20px;
  background: rgba(71, 41, 33, 0.42);
}
.el-menu-div{
  height: 60px;
  left: 0;
  background: rgb(191, 186, 184);
  .el-menu-style{
    left: 20%;
    background: rgb(191, 186, 184);
  }
}
.menu-popover{
  width: 300px;
  margin: 0;
  padding: 0;
}
</style>