去除el-submenu下拉箭头

最新推荐文章于 2023-11-11 20:59:35 发布

HongHamster

最新推荐文章于 2023-11-11 20:59:35 发布

阅读量2.9k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/HongHamster/article/details/127717551

版权

需求：点击头像下拉选项，但不需要下拉箭头

解决方案：给el-menu加上类名，用深度给箭头添加display:none

html：

<el-menu
  mode="horizontal"
  class="platform_avatar">
    <el-submenu index="more">
      <el-badge
        class="avatar"
        slot="title">
          <img
            class="imgUserAvatar mini"
            src="@/assets/images/common/user_head.png"
            alt="">
       </el-badge>
    </el-submenu>
</el-menu>

css:

.platform_avatar{
  height: 55px;
  line-height: 55px;
  .imgUserAvatar{
    width: 32px;
    height: 32px;
  }
  ::v-deep .el-submenu__title {
    .el-icon-arrow-down {
       display: none;
    }
  }
}