el-dropdown下拉菜单样式

VYPS

已于 2024-02-26 14:13:43 修改

阅读量951

点赞数 9

分类专栏： css 文章标签： vue.js javascript 前端

于 2024-01-19 10:08:11 首次发布

本文链接：https://blog.csdn.net/m0_65930596/article/details/135690470

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html

<!-- 下拉菜单 -->
        <div class="dropmenu">
          <el-dropdown @command="onDropClick">
            <span class="el-dropdown-link">
              {{ showMenu }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="dropdown">
              <el-dropdown-item
                v-for="item in siteTypeList"
                :command="item.dictValue"
                :key="item.id"
                :class="item.dictValue == ckMenu ? 'active' : ''"
              >
                {{ item.dictLabel }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>

css

<style lang="scss" scoped>
.dropmenu {
  width: 70px;
}

.el-dropdown-link {
  font-size: 18px;
  cursor: pointer;
  display: inline-block;
  color: #eff5fa;
  font-size: 16px;
  line-height: 30px;
  font-weight: 600;
  text-shadow: 2px 2px 4px #4c9edc;
}
.el-icon-arrow-down {
  font-size: 12px;
  color: #eff5fa;
  font-size: 16px;
  line-height: 30px;
  font-weight: 600;
  text-shadow: 2px 2px 4px #4c9edc;
}
.el-dropdown-menu--medium {
  background-color: #0a1f38;
  border: 1px solid #409eff;
  .el-dropdown-menu__item {
    &.active {
      color: #fff;
      background-color: #409eff;
    }
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
</style>

<style lang="scss" >
.el-popper[x-placement^='bottom'] {
  margin-top: 3px;
}
/* 修改小三角样式 */
.dropdown.el-popper[x-placement^='bottom'] .popper__arrow {
  border: none;
}
.dropdown.el-popper[x-placement^='bottom'] .popper__arrow::after {
  border-bottom-color: #409eff;
}
</style>