如何自定义修改elementUi里popover弹出框的样式及位置

最新推荐文章于 2025-06-12 09:18:33 发布

金刚大力士

最新推荐文章于 2025-06-12 09:18:33 发布

阅读量9.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 elementui

本文链接：https://blog.csdn.net/qq_42177730/article/details/121675890

本文介绍如何在前端开发中针对elementUi的popover弹出框进行样式定制和位置调整，通过编写独立的style样式实现个性化需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要单独写一个style样式

                    <div class="columnDiv" slot="reference">
                        <ul>
                            <template v-for="(item, index) in columnList1">
                                <el-popover
                                    class="hoverpart"
                                    v-if="item.canProp"
                                    placement="right"
                                    width="280"                 
                                    popper-class="popoverDiv"
                                    trigger="hover">
                                    <div class="contentDiv">
                                        <div class="div1"><span class="span1">名称：{{item.contentName}}</span><span class="span2">统计：{{item.count}}</span></div>
                                        <div class="div2">最新触发：{{item.contentName}}</div>
                                        <div class="div3">源IP：{{item.fromIP}}</div>
                                        <div class="div4">目的IP：{{item.toIP}}</div>
                                    </div>
                                    <li slot="reference" :key="index">{{item.name}}</li>
                                </el-popover>
                                <li v-else :key="index">{{item.name}}</li>
                            </template>
                        </ul>
                    </div>

  <style lang="less">
        .popoverDiv{
            color:#fff;
           background-color: #409EFF;
        .div1{
            .span1{
                
                margin-right: 20px;
            }
        }
    }
    /* .el-popper[x-placement^=left] .popper__arrow::after{
    border-left-color: #409EFF;
  } */
  .el-popper[x-placement^=right] .popper__arrow::after{
    border-right-color: #409EFF;
  }
  /* .el-popper[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: #409EFF;
  }
  .el-popper[x-placement^=top] .popper__arrow::after{
    border-top-color: #409EFF;
  } */
  .el-popper[x-placement^=right] {
    margin-left:0px;
  }
    </style>