首页 > 其他分享 >element-ui 的NavMenu菜单实现水平左右布局

element-ui 的NavMenu菜单实现水平左右布局

时间：2023-06-08 14:23:01浏览次数：51  
标签：选项 flex 中英文 Flexbox 元素 element ui 对齐 NavMenu

场景

有的时候我们需要将菜单水平、并且左右进行摆放

效果图

代码实现

<template>
  <div class="app">
    <el-divider>官网示例</el-divider>
    <el-menu
      :default-active="activeIndex"
      class="el-menu"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6">中英文切换</el-menu-item>
      <el-menu-item index="5">我的信息</el-menu-item>
    </el-menu>
    <el-divider class="color-red"
      >需求：中英文切换和我的信息再最右侧显示</el-divider
    >
    <el-divider content-position="left">方式1：浮动</el-divider>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-1"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6" style="float: right">中英文切换</el-menu-item>
      <el-menu-item index="5" style="float: right">我的信息</el-menu-item>
    </el-menu>
    <el-divider content-position="left">方式2：flex布局+flex:1</el-divider>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-2"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6" style="flex: 1">中英文切换</el-menu-item>
      <el-menu-item index="5">我的信息</el-menu-item>
    </el-menu>
    <el-divider content-position="left"
      >方式3：flex布局+margin-left:auto <strong>推荐</strong></el-divider
    >
    <el-menu
      :default-active="activeIndex"
      class="el-menu-3"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6" style="margin-left: auto"
        >中英文切换</el-menu-item
      >
      <el-menu-item index="5">我的信息</el-menu-item>
    </el-menu>
    <el-divider content-position="left"
      >方式4：flex布局+justify-self <del>[生效]</del></el-divider
    >
    <el-menu
      :default-active="activeIndex"
      class="el-menu-4"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6" style="justify-self: end"
        >中英文切换</el-menu-item
      >
      <el-menu-item index="5">我的信息</el-menu-item>
    </el-menu>
  </div>
</template>
<script setup>
import { ref } from "vue";

const activeIndex = ref();
</script>
<style scoped>
.el-menu-2,
.el-menu-3,
.el-menu-4 {
  display: flex;
}
.color-red .el-divider__text {
  color: #f00;
}
strong {
  font-size: 30px;
}
</style>

总结

在 Flexbox 布局中，我们经常需要对子元素进行对齐操作。使用 justify-content 和 align-items 可以轻松地对所有子元素进行对齐，但是当我们需要对某个子元素进行单独的对齐时，该怎么做呢？
有时，我们可能会在 Flexbox 容器中使用 justify-self 属性来实现子元素的水平对齐。但是，需要注意的是，justify-self 在 Flexbox 布局中是无效的。这意味着，如果您想让一个子元素在 Flexbox 布局中水平对齐，您需要使用其他技术。
一种常见的技术是将子元素的 margin-left 设置为 auto。当您将一个子元素的 margin-left 设置为 auto 时，该元素将被推到容器的最右边，同时保持其他元素的左对齐。这是因为在 Flexbox 布局中，剩余的可用空间会平均地分配给所有子元素，而将一个子元素的 margin-left 设置为 auto 可以使该元素占据剩余的空间。

参考文章

标签：选项,flex,中英文,Flexbox,元素,element,ui,对齐,NavMenu
From： https://www.cnblogs.com/it774274680/p/17466344.html

相关文章

  • SparkUI中的Peak Pool Memory Direct / Mapped (直接缓冲池和映射缓冲池)
      PeakPoolMemoryDirect/Mapped --直接缓冲池和映射缓冲池峰值内存##什么是直接缓冲池和映射缓冲池？在Java中，有两种类型的缓冲池：直接缓冲池和映射缓冲池。直接缓冲池1）从堆外内存分配，不受JVM管理2）占用内存较多3）相比从JVM复制数据到本地，性能更高 映射缓冲池1）将文......
  • Quill富文本编辑器(下)
    用自定义指令给vue-quill-editor添加一个全屏的功能1.自定义指令可分为全局定义和局部定义   1.1全局自定义指令以及引入方式1Vue.directive("maxWindow",{2bind(el,binding){3letmaxId=binding.value+"maxId";4letminId=binding.value+......
  • 高颜值的可视化大屏，让瓴羊Quick BI受多家机构认可
    近年来，大量国内企业积极寻求数字化升级，推动了国内商业智能BI工具市场的蓬勃发展。瓴羊QuickBI、帆软FineBI、SmartBI、永洪BI......琳琅满目的BI产品选择对企业的选型造成了一定的困扰，因此，专业机构的评估报告成了不少企业开展商业智能BI工具选型的关键。值得关注的是，在多个国内......
  • 瓴羊Quick BI：强大数据构建能力全面提升企业数据分析的效能
    近日，瓴羊QuickBI又一次入选了权威行业研究机构Gartner发布的魔力象限ABI报告，引发业内热议。要知道，在全球范围内每年能够入选Gartner魔力象限ABI报告的BI工具只有20家，而瓴羊QuickBI算上今年已经连续四年入选，并且在今年以其在提升企业数据分析的能力方面的出色表现跃升到了挑战者象......
  • 瓴羊Quick BI报表分析工具，大幅提升企业经营效率
    随着ChatGPT等大模型软件的迅速崛起，在工作中使用智能工具提高效率、节省人力成了许多企业共同的选择。从目前的应用场景看，ChatGPT等软件大多是基于自然语言处理技术的生成式人工智能模型，更善于处理文字、图片类的工作，对于企业经营过程中海量业务数据的处理，更依靠瓴羊QuickBI报表分......
  • JS 中 使用 Uuid
    一、官方网站https://github.com/uuidjs/uuid二、安装uuidnpminstalluuid三、导入uuid注：官方文档里的示例只适用于服务端（nodejs），想在浏览器里使用，得换一种导入方法nodejs：import{v4asuuidv4}from'uuid';浏览器js：constuuidv4=require('uuid').v4;四、使用c......
  • QA|重写了元素定位后报错xx object has no attribute 'find_element'|网页计算器自动
    代码如下：1#basepage.py23fromseleniumimportwebdriver456classBasePage():7"""8基类用作初始化封装常用操作9"""1011def__init__(self):12"""13初始化driver14......
  • Ubuntu和MIUI时间显示秒数字
    Ubuntu(23.04)状态栏的时间显示秒，则需要执行以下命令mango@mango-ubuntu:~/Desktop$gsettingssetorg.gnome.desktop.interfaceclock-show-secondstrue小米手机(MIUI13)要展示时间到分秒可以打开时间悬浮窗功能即可。1.打开手机设置点击更多设置。2.点击页面下方的开发......
  • 针对 B/S、C/S 架构的 180 个简单测试案例——GUI 和可用性测试场景
    这是一个针对web应用和桌面应用程序的测试清单假设：假定你的应用程序支持下列功能：-带有多种字段的表单-子窗口-与数据库交互-多种查询过滤规则和结果显示-图片上传-邮件发送-数据导出GUI和可用性测试场景1.页面中的所有字段（如：文本框，单选选项，下拉列表）应该适当对齐2.除特殊指定外，数......
  • TODO 怎么做一个SystemUI
    如果要从0做一个SystemUI，覆盖原来的SystemUI。什么是SystemUI：从UI上讲就是各种Window。从架构上说，就是各种SystemUI抽象类的各种实现，组成SystemUI。通过一个系统服务和SystemServer和系统交互，显示对应功能，如状态栏、通知、VolumeUI等。 TODO完善博客......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99