element-ui导航案例

最新推荐文章于 2024-07-18 17:42:24 发布
最新推荐文章于 2024-07-18 17:42:24 发布
阅读量76 收藏
点赞数
文章标签： ui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_70176200/article/details/133363102
版权

左侧导航栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
  <script src="js/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .container {
      display: flex;
      height: 100vh;
    }

    .sidebar {
      width: 200px;
      background-color: #f0f0f0;
    }

    .content {
      flex: 1;
      padding: 20px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="container">
    <div class="sidebar">
      <el-menu
              :default-active="activeMenu"
              mode="vertical"
              @select="handleMenuSelect"
      >
        <el-submenu index="1">
          <template slot="title">
             <i class="el-icon-location"></i>
            <span>导航一</span>
           </template>
          <el-menu-item index="1-1">选项1-1</el-menu-item>
          <el-menu-item index="1-2">选项1-2</el-menu-item>
          <el-menu-item index="1-3">选项1-3</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">菜单2</template>
          <el-menu-item index="2-1">选项2-1</el-menu-item>
          <el-menu-item index="2-2">选项2-2</el-menu-item>
          <el-menu-item index="2-3">选项2-3</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">菜单3</template>
          <el-menu-item index="3-1">选项3-1</el-menu-item>
          <el-menu-item index="3-2">选项3-2</el-menu-item>
          <el-menu-item index="3-3">选项3-3</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <div class="content">
      <div v-if="activeMenu === '1-1'">
        <h3>选项1-1的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
      <div v-if="activeMenu === '1-2'">
        <h3>选项1-2的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
      <div v-if="activeMenu === '1-3'">
        <h3>选项1-3的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
      <div v-if="activeMenu === '2-1'">
        <h3>选项2-1的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
      <div v-if="activeMenu === '2-2'">
        <h3>选项2-2的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
      <div v-if="activeMenu === '2-3'">
        <h3>选项2-3的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
      <div v-if="activeMenu === '3-1'">
        <h3>选项3-1的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
      <div v-if="activeMenu === '3-2'">
        <h3>选项3-2的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
      <div v-if="activeMenu === '3-3'">
        <h3>选项3-3的内容</h3>
        <!-- 右侧页面的内容 -->
      </div>
    </div>
  </div>
</div>
<script>
   new Vue({
     el:"#app",
     data: {
         activeMenu: '1-1', // 默认选中的菜单项
     },
     methods: {
       handleMenuSelect(menu) {
         this.activeMenu = menu;
       },
     },
   })
</script>
</body>
</html>
忆白@
关注
vue2+若依框架+element-ui如何实现侧边栏改成顶部导航？(兼职解答合作私信)
ZZZZZZZZjy的博客
08-19 5744
我们的思路是把垂直的侧边栏二级标题换成水平的，查看element-ui的官网可知NavMenu 导航菜单。把vertical改成horizontal之后并把侧边栏组件放到顶部组件中发现它没有到上面去如下图。于是给sidebar的el-menu组件加一个flex让它浮动上去。侧边栏的空白区是多余的就把sidebar-width设置为0就好了。若依没有开启设置布局中的topnav的时候是这样的。最后顶部导航就出来，有同样需求的小伙伴可以试试，
Element-UI快速入门
热门推荐
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
Elementui中El-menu导航栏
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
Element -Ui之NavMenu导航栏
m0_50007683的博客
05-03 1万+
一、NavMenu重要标签和参数说明 mode：导航栏的模式，默认值vertical 导航栏处于垂直状态，改为horizonta可变为水平模式。 index：唯一标志。 default-active：激活当前菜单的index。 router： 是否使用路由，启用后可以通过index作为地址进行跳转。 <el-menu-item index="1">导航栏中的子菜单标签。 <el-submenu> 生成二级菜单。 代码实现..
3.导航栏功能
最新发布
yujiabao702的博客
07-18 313
【代码】5.导航栏功能。
ElementUI之首页导航&左侧菜单
theHider的博客
07-24 2603
为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。创建。
vue element UI 学习总结笔记（九）_ 导航菜单与路由
wh_xia_jun的专栏
05-29 6194
获取用户信息 我们把login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息。 router.beforeEach((to, from, next) => { if (!(store.getters.savestate === 0)) { Message({ showClose: true, message: '正在编辑状态中,请先保存', type: 'error' }) next(false) .
vue2.0结合Element-ui实战案例
10-17
Vue 2.0 结合 Element-UI 的实战案例旨在教授如何使用这两个强大的工具来构建现代前端应用程序。Vue 2.0 是一款轻量级、高性能的JavaScript MVVM框架，它提供了一种声明式的数据绑定和组件化的方式，使得开发者能够...
element-ui 实现响应式导航栏的示例代码
11-21
Element UI虽然提供了丰富的组件库，但可能无法直接满足所有特定的设计需求，例如传统的顶部导航栏。在这种情况下，我们需要对现有组件进行自定义以满足特定的响应式布局需求。 在标题和描述中提到的问题是，如何在...
element-ui后台管理系统小案例
08-14
Element-UI 后台管理系统小案例是基于 Vue.js 框架实现的一个简易管理界面，主要利用 Element-UI 提供的组件库构建出用户友好的交互界面。Vue.js 是一个轻量级、高性能的前端框架，它允许开发者通过声明式编程来构建...
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
【Element入门】5、Element UI 导航组件详解
weixin_52938153的博客
05-22 1309
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
【前端】Vue+Element UI案例：通用后台管理系统-导航栏
karshey的博客
11-01 1万+
【前端】Vue+Element UI案例：通用后台管理系统-导航栏
element ui NavMenu 实现侧边栏导航菜单
Igiveufireworks的博客
05-08 2019
使用Element UI 的 Container 布局容器和NavMenu导航菜单组件，使用router-view存放二级路由出口。根据v-for遍历菜单参数，渲染导航栏。
取消Element UI响应式设计——打造固定布局的菜单
Blog of Leviash
11-14 629
要取消Element UI导航菜单的响应性，我们可以使用自定义的CSS样式来覆盖框架的默认样式。具体来说，我们需要设置菜单项的水平排列（flex-direction: row 或者 mode="horizontal"），并使其宽度为100%，以保持固定的布局。
ElementUI之首页导航+左侧菜单
weixin_66437564的博客
07-25 613
老大，接口文档还没输出，我的好多活干不下去啊！后端小哥，接口写好了没，我要测试啊！前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
vue后台项目左侧菜单栏配合element-ui中tag标签实现多标签页导航栏
xcjhxh的博客
03-02 4002
vue后台项目左侧菜单栏配合element-ui中tag标签实现多标签页导航栏！
element ui+vue实现导航栏菜单以及页面跳转
H-rosy的博客
06-24 1万+
关于博主： 不知道算不算的上入门，就是刚刚学习vue框架，断断续续的学习，所以有些地方讲的不正确也欢迎大家批评斧正，希望与大家共同进步 问题描述 对于初学前端的我们来说搭建一个路由导航界面还是比较困难的，在这里给大家分享一下最近我学到的一些这方面的知识 首先给大家看看效果图吧： 写的就是一些很基础的东西，因为这主要是学习路由导航的搭建原理。下面这个代码就是router下的index.js文件，就是配置路由的地方，如果你对路由的注册还不太懂请戳这里 import Vue from 'vue' impor
Vue2.0结合Element-ui实战：前端项目搭建与页面布局
"这篇教程主要关注的是如何使用Vue2.0和Element-UI进行实战开发，分享了一个实际的案例，旨在帮助读者理解这两个技术的结合应用。教程中将使用vue-cli构建工具、vue-router进行路由管理、axios处理HTTP请求、moment...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值