Element UI更改下拉菜单el-dropdown-menu样式

原创已于 2023-09-21 11:22:22 修改 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #前端

于 2023-07-31 13:52:50 首次发布

文章讲述了在CSS非scoped模式下可以直接修改样式，而在scoped模式下需额外创建style标签或新CSS文件并引入。内容涉及到HTML结构，Vue组件内的el-dropdown元素，包括头像、用户名、下拉菜单的样式调整，以及退出登录按钮。同时提到了CSS样式的覆盖和SVG图标在组件中的使用。

如果css不是scoped模式可以直接修改，否则需要另外写个style标签

或者新建一个css文件，再引入

html：

<div class="right-menu">
        <!-- 个人中心 -->
        <el-dropdown class="avatar-container">
          <div class="avatar-wrapper">
            <!-- 头像 -->
            <img v-if="avatar" :src="avatar" class="user-avatar">
            <span v-else class="username">{{ name?.at(0) }}</span>
            <!-- 用户名 -->
            <span class="name">{{ name }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <router-link to="/user/info">
              <el-dropdown-item>
                <svg-icon icon-class="base-info"></svg-icon>
                <span>基本资料</span>
              </el-dropdown-item>
            </router-link>
            <router-link to="/user/avatar">
              <el-dropdown-item>
                <svg-icon icon-class="change-avatar"></svg-icon>
                <span>更换头像</span>
              </el-dropdown-item>
            </router-link>
            <router-link to="/user/password">
              <el-dropdown-item>
                <svg-icon icon-class="change-password"></svg-icon>
                <span>重置密码</span>
              </el-dropdown-item>
            </router-link>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 退出登录 -->
        <el-button class="logout" type="text" @click="logout">
          <svg-icon icon-class="logout"></svg-icon>
          <span style="color:#fff">退出</span>
        </el-button>
      </div>

新建css文件准备样式：

/* 整体背景色和圆角 */
.el-dropdown-menu {
  background-color: #24262d !important ;
  border: 0px solid #00487f !important ;
  border-radius: 5px;
}
/* 下拉框定位 */
.el-popper {
  position: absolute !important ;
  top: 56px !important;
}
.el-popper[x-placement^=bottom]{
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0px;
}
.el-dropdown-menu__item:not(:last-of-type){
  border-bottom: 1px solid #00487f;
}
/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow{
  border: none;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border: none;
}
/* 下拉选项样式与hover状态 */
.user-dropdown {
  li {
    margin: 0;
    padding: 0;
    width: 120px;
    height: 44px;
    color: #fff !important;
    text-align: center;
    line-height: 44px;
  }
  li:hover {
    border-radius: 5px;
    background-color: #2E3240 !important;
    color: #fff !important;
  }
}
/* 自定义内容 忽略 */
.user-dropdown {
  span {
    font-size: 14px;
    vertical-align: middle;
  }
  .svg-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 5px;
  }
}

组件中引入：

<script>
    import './el-dropdown.less'
</script>