如何修改Element Plus中el-popover的最小宽度

前提问题:使用el-popover弹出框,el-popover在element plus中规定宽度属性,最小宽度是150
在本身属性上设置小于150px的宽度并未生效,使用穿透,deep修改.el-popover.el-popper的宽度也未生效
解决过程:因为el-popover是和app一个层级,在body下的,所以以上两种方式都不能够修改宽度,使用el-popover本身属性popper-class,设置自定义样式类,去除<style>的scoped,设置自定义类的样式为min-width: 120px!important;具体宽度根据个人需要设定,如果是设定150px以上的,不用这些设置,直接使用el-popover本身属性width即可设定
解决结果:

html部分

<el-popover :visible="data.isShowMenu" placement="right"  trigger="click"  popper-class="customPopper">                       
    <p @click.stop="()=>importLineData(data)" class="popoverFont">
      <span class="iconfont icon-daoru" style="margin-right:10px;color:#2387F0;"/>
      <span>导入</span> 
    </p> 
    <p v-show="node.data.type > 6" class="popoverFontB">
      <span class="iconfont icon-tianxie" style="margin-right:10px;color:#2387F0;"/>
          <el-badge is-dot>数据变更</el-badge>         
    </p>
    <template #reference>
       <span @click.stop="()=>showMenu(data)" class="iconfont icon-24gf-ellipsis"/>
    </template>
</el-popover>

 css部分

<style lang="scss">
.customPopper {
    min-width: 120px!important;
}
</style>

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
根据引用的信息,el-popoverElement Plus规定的最小宽度属性是150px。然而,如果我们想要设置小于150px的宽度,使用el-popover本身属性或者通过穿透修改.el-popover.el-popper的宽度都不会生效。解决这个问题的方法是使用el-popover的popper-class属性,设置一个自定义样式类,并且去除scoped样式。然后,在自定义类的样式设置min-width: 120px!important;即可达到修改最小宽度的效果。如果需要设置大于150px的宽度,直接使用el-popover本身的width属性即可进行设定。 具体的代码如下所示: ```html <template> <el-popover width="120px" popper-class="customPopper"> <!-- 弹出框内容 --> </el-popover> </template> <style lang="scss"> .customPopper { min-width: 120px!important; } </style> ``` 通过这种方式,我们可以修改el-popover的最小宽度为120px,满足个人的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [如何修改Element Plusel-popover的最小宽度](https://blog.csdn.net/m0_75107188/article/details/131455046)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue项目实现el-popover弹窗拖拽位置以及实现弹窗的拖拽调整大小功能](https://blog.csdn.net/lFFFFFFl/article/details/131771216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值