vue+element 导航 实现例子

项目使用的是 vue 3,安装配置可以查看栏目前面的文章。

组件

导航:https://element-plus.org/zh-CN/component/menu.html

面包屑:https://element-plus.org/zh-CN/component/breadcrumb.html

安装element库

shell 复制代码
PS D:\code\my-vue3-project>  npm install element-plus --save

added 23 packages, and audited 57 packages in 17s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

运行后,项目package.json文件添加了依赖:

js 复制代码
"dependencies": {
    "element-plus": "^2.9.9",
    ...
   },

代码中导入依赖

在main.js中import 相关依赖

js 复制代码
import { createApp } from 'vue'
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import './style.css'
import App from './App.vue'

没导入css,会导致组件的样式不正确。

添加侧边导航实现

导入组件

在.vue文件中导入用到的组件:

js 复制代码
<script>
import { ElRow, ElCol, ElMenu,ElSubMenu, 
  ElMenuItem, ElMenuItemGroup,ElIcon } from 'element-plus'
...
</script>

导航实现

js 复制代码
<template>
 <el-row class="tac">
    <el-col>
      <h5 class="mb-2">Default colors</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
   
  </el-row>
</template>

上面的代码是从官方上复制过来,删除了长度限制":span="12""

运行

npm run dev

源码:https://download.csdn.net/download/xgw1010/90762342

相关推荐
半点寒12W1 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083163 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's4 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫4 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim4 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron