vue3封装Element导航菜单

请添加图片描述

1. 导航外层布局 AsideView.vue

<template>
  <el-menu
    :default-active="defaultActive"
    class="my-menu"
    :collapse="isCollapse"
    :collapse-transition="false"
    @open="handleOpen"
    @close="handleClose"
  >
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";

import MenuItem from "./components/MenuItem.vue";
const collapseStore = useCollapseStore();
const isCollapse = computed(() => collapseStore.collapse);
const store = useMenuStore();
const menuList = store.menuList;
const flattenMenuList = store.flattenMenuList();
const defaultActive = ref("");
onMounted(() => {
  const route = useRoute();
  watch(
    () => route.fullPath,
    (newPath, oldPath) => {
      getDefaultActive(newPath);
    },
    {
      immediate: true,
    }
  );
});

const getDefaultActive = (path) => {
  const currentMenu = flattenMenuList.find((item) => item.path === path);
  if (currentMenu) {
    defaultActive.value = currentMenu.id;
  }
  console.log("defaultActive", defaultActive.value);
};

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss">
.icon-collapse {
  cursor: pointer;
  width: 64px;
  height: 30px;
  margin: 0 auto;
}
.my-menu {
  background-color: #545c64;
  border-right: none;
  color: #fff;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-menu-item,
.el-sub-menu__title {
  background-color: #545c64;
  color: #fff;
}
.el-menu-item:hover,
.el-sub-menu__title:hover {
  background: rgb(62, 64, 74);
}
.el-menu-item.is-active,
.el-sub-menu__title.is-active {
  background: rgb(62, 64, 74);
}
/* 滚动条 */
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 7px;
  &-thumb {
    /*滚动条里面小方块*/
    border-radius: 7px;
    background-color: #d0d0d0;
    &:hover {
      /*滚动条里面小方块*/
      background-color: #b7b7b7;
    }
  }
  &-track {
    /*滚动条里面轨道*/
    border-radius: 7px;
    background-color: #fff;
  }
}
</style>

2. 单个导航菜单封装 MenuItem.vue

<template>
  <template v-for="item in menuList" :key="item.id">
    <el-sub-menu
      :index="item.id"
      v-if="item.children && item.children.length > 0"
    >
      <template #title>
        <el-icon :size="30">
          <component class="fold-menu" :is="item.icon"></component>
        </el-icon>
        <span>{{ item.name }}</span>
      </template>
      <menu-item :menuList="item.children"></menu-item>
    </el-sub-menu>
    <el-menu-item :index="item.id" v-else @click="handleJump(item)">
      <el-icon :size="30">
        <component class="fold-menu" :is="item.icon"></component>
      </el-icon>
      <template #title>{{ item.name }}</template>
    </el-menu-item>
  </template>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import type { MenuInfo } from "~/types/menu";
const router = useRouter();

const props = defineProps({
  menuList: {
    type: Array<MenuInfo>,
  },
});

const handleJump = (item: MenuInfo) => {
  if (item.path) {
    router.push(item.path);
  }
};
</script>

<style lang="scss" scoped></style>

3. 控制导航收缩 stores/collapse.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useCollapseStore = defineStore('collapse', () => {
  const collapse = ref(false)
  const changeCollapse = function changeCollapse() {
    collapse.value = !collapse.value
  }

  return { collapse, changeCollapse }
})

4. 菜单数据格式示例

  const menuList = ref<MenuInfo[]>([
    {
      id: '1',
      name: '首页',
      path: '/',
      icon: 'HomeFilled',
    },
    {
      id: '2',
      name: '用户管理',
      path: '/user-manage',
      icon: 'UserFilled',
    },
    {
      id: '3',
      name: '权限管理',
      path: '/permission',
      icon: 'Lock',
    },
    {
      id: '4',
      name: '商品管理',
      path: '/product',
      icon: 'ShoppingBag',
      children: [
        {
          id: '4-1',
          name: '商品列表',
          path: '/product/list',
          icon: 'ShoppingBag'
        }
      ]
    },
    {
      id: '5',
      name: '订单管理',
      path: '/order',
      icon: 'Document',
      children: [
        {
          id: '5-1',
          name: '订单列表',
          path: '/order/list',
          icon: 'Document'
        }
      ]
    },
    {
      id: '6',
      name: '数据统计',
      path: '/data',
      icon: 'DataAnalysis'
    },
    {
      id: '7',
      name: '系统设置',
      path: '/system',
      icon: 'Setting'
    },
    {
      id: '8',
      name: '其他',
      path: '/other',
      icon: 'Document'
    }
  ])

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506629.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习入门】拥抱人工智能,从机器学习开始

拥抱人工智能&#xff0c;从机器学习开始 目录&#xff1a; 1. 机器学习&#xff1a;一种实现人工智能的方法2. 机器学习算法&#xff1a;是使计算机具有智能的关键3. Anaconda&#xff1a;初学Python、入门机器学习的首选4. 总结 转载链接&#xff1a;文章-阿里云开发者社区…

PyTorch深度学习入门-1

PyTorch深度学习快速入门教程&#xff08;绝对通俗易懂&#xff01;&#xff09;【小土堆】_哔哩哔哩_bilibili \ PyTorch 和 TensorFlow 是两个深度学习框架&#xff0c;TensorBoard 是 TensorFlow 提供的可视化工具&#xff0c;Transforms是 PyTorch 中用于数据预处理的工具…

可视化图表:K线图,快速搞清价格波动。

2023-08-21 21:20贝格前端工场 Hi&#xff0c;我是贝格前端工场的老司机&#xff0c;本文分享可视化图表设计的K线图设计&#xff0c;欢迎老铁持续关注我们。 一、K线图的含义 K线图&#xff08;K Line Chart&#xff09;是一种常用于股票、期货等金融市场的可视化图表&…

如何将图片识别转文字?这3种工具简单易操作

如何将图片识别转文字&#xff1f;在数字化时代&#xff0c;图片识别转文字技术的需求愈发凸显。无论是处理海量的扫描文档&#xff0c;从中迅速提取关键信息&#xff0c;还是通过照片轻松记录菜单上的文字&#xff0c;这一技术都展现出了其强大的实用性。它极大地提高了我们的…

计算机网络—VLAN 间路由配置

目录 1.拓扑图 2.实验环境准备 3.为 R3 配置 IP 地址 4.创建 VLAN 5.配置 R2 上的子接口实现 VLAN 间路由 6.配置文件 1.拓扑图 2.实验环境准备 配置R1、R3和S1的设备名称&#xff0c;并按照拓扑图配置R1的G0/0/1接口的IP地址。 [Huawei]sysname R1 [R1]interface Giga…

机器视觉/将HIK海康面阵相机连接Halcon软件

文章目录 概述工业相机客户端动态库拷贝Halcon连接HIK相机的配置相机参数其他 概述 本文简述了如何将海康面阵相机连接到Halcon软件中进行实时取图的过程。 补充&#xff0c; 整个实践过程使用 17.12 / x64-win64 Halcon 软件版本 海康 MV-CE200-10GM 面阵相机。从左到右简解…

机器学习周报第35期

目录 一、文献阅读&#xff1a;You Only Look Once: Unified, Real-Time Object Detection1.1 摘要1.2 背景1.3 论文模型1.4 网络设计1.5 YOLO的局限性1.6 实现代码 target 7*7*30 值域为0-1 一、文献阅读&#xff1a;You Only Look Once: Unified, Real-Time Object Detection…

C/C++ 之 GSL 数学运算库使用笔记

Part.I Introduction 本文主要记录一下笔者使用 GSL 过程当中所做的一些笔记。 Chap.I 传送门 一些传送门 GSL源码&#xff08;CMakeList 版本-Windows&#xff09;GSL源码&#xff08;configure 版本-Linux&#xff09;GSL 在线文档GSL 文档下载 Chap.II GSL 简介 GSL 全…

【Java EE】多线程(一)

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…

Python爬虫验证码识别——手机验证码的自动化处理

手机验证码的自动化处理 有一种验证码就是手机验证码&#xff0c;如果在PC上出现了一个手机验证码&#xff0c;需要先在PC上输入手机号&#xff0c;然后把短信验证码发到手机上&#xff0c;再在PC上输入收到的验证码&#xff0c;才能通过验证。 遇到这样的情况&#xff0c;如…

【Linux在程序运行时打印调用栈信息(函数名,文件行号等)】

在程序运行时打印相关调用栈信息&#xff08;函数名&#xff0c;文件行号等&#xff09;,便于梳理调用逻辑等 //stack.c #include <stdio.h> #include <execinfo.h> #include <stdlib.h> #include <string.h> #include <stdbool.h>#define MAX_…

vue cesium heatmap 热力图

实现效果 引入 heatmap index.html 中引入 heatmap <script src"./heatmap.min.js"></script>使用 <script lang"ts" setup> import * as Cesium from cesium import cesium/Build/Cesium/Widgets/widgets.cssdefineOptions({ name: …

MySQL count函数的使用

count&#xff08;&#xff09;函数在使用时参数好像不能设置为表达式&#xff0c;只能设置成指定字段或* 比如在查询性别为男的成员数目时不能写&#xff1a; select count(gendermale) from user_profile ; 否则直接得到6&#xff0c;也就是等价于select count(gender) fro…

Docker镜像的(Dive)分析和(Grype)漏洞扫描

Dive dive能够分析docker镜像分层内容以及发现缩小docker/OCI镜像大小的方法。 提高部署效率&#xff1a;能够秒级快速启动一个应用&#xff0c;而传统的方式分钟级别以上&#xff1b; 提高运行效率&#xff1a;相对物理机和虚拟化&#xff0c;容器具有更高的资源利用率&…

【经典算法】LeetCode 21:合并两个有序链表Java/C/Python3实现含注释说明,Easy)

合并两个有序链表 题目描述思路及实现方式一&#xff1a;迭代&#xff08;推荐&#xff09;思路代码实现Java版本C语言版本Python3版本 复杂度分析 方式二&#xff1a;递归&#xff08;不推荐&#xff09;思路代码实现Java版本C语言版本Python3版本 复杂度分析 总结相似题目 标…

LLM大语言模型(八):ChatGLM3-6B使用的tokenizer模型BAAI/bge-large-zh-v1.5

背景 BGE embedding系列模型是由智源研究院研发的中文版文本表示模型。 可将任意文本映射为低维稠密向量&#xff0c;以用于检索、分类、聚类或语义匹配等任务&#xff0c;并可支持为大模型调用外部知识。 BAAI/BGE embedding系列模型 模型列表 ModelLanguageDescriptionq…

《QT实用小工具·五》串口助手

1、概述 源码放在文章末尾 该项目实现了串口助手的功能&#xff0c;可在界面上通过串口配置和网络配置进行串口调试。 基本功能 支持16进制数据发送与接收。支持windows下COM9以上的串口通信。实时显示收发数据字节大小以及串口状态。支持任意qt版本&#xff0c;亲测4.7.0 到…

[leetcode] 100. 相同的树

给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&#xff1a;true示例 2&a…

微信小程序【从入门到精通】——服务器的数据交互

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

【设计】6种ID生成策略描述,优点 ,缺点 ,适用场景

1.数据库自增ID 描述 自增Id是在设计表时将id字段的值设置为自增的形式&#xff0c;这样当插入一行数据时无 需指定id会自动根据前一字段的Id值1进行填充 优点 主键自动增长&#xff0c;不用手工设值、数字型&#xff0c;占用空间小、检索非常有利、有顺序&#xff0c;不会…