19.面包屑导航制作
面包屑导航制作
官网:组件 | Element
1. 在layout下新建BreadCrumb.vue
BreadCrumb.vue
<template><div class="bread-text"><el-breadcrumb class="bred"separator="/"><el-breadcrumb-item v-for="item in tabs">{{ item.meta.title }}</el-breadcrumb-item></el-breadcrumb></div>
</template><script setup lang="ts">
import { onMounted, ref,Ref,watch } from 'vue';
import { useRoute,RouteLocationMatched } from 'vue-router';
// 获取当前路由
const route = useRoute();
//定义面包屑导航数据
const tabs : Ref<RouteLocationMatched[]> = ref([])
//获取面包数据
const getBreadCrumb = () => {// console.log(route)//找出存在title属性的路由数据let matched = route.matched.filter((item)=>item.meta && item.meta.title)// console.log(matched)const first = matched[0]//如果第一项不是首页,则添加首页if(first.path !=='/dashboard'){//构造首页matched = [{path:'/dashboard',meta:{title:'首页'}} as any].concat(matched)}tabs.value = matched;
}
//监听当前路由
watch(()=>route.path,()=>getBreadCrumb()
)
//刷新面包屑数据不会丢失当前页面
onMounted(()=>{getBreadCrumb()
})
</script><style scoped lang="scss">
//修改字体颜色
:deep(.el-breadcrumb__inner) {color: #8d8d8d !important;
}
.bred {margin-left: 20px;
}
// 修改字体大小
:deep(.el-breadcrumb__item) {font-size: 15px !important;
}
.bread-text{margin-left: 29px;
}
</style>
在Index.vue中引入
<template><el-container class="mycontainer"><el-aside width="230px" class="asside"><Menu></Menu></el-aside><el-container><el-header class="header"><Collapse></Collapse><BreadCromb></BreadCromb></el-header><el-main class="mymain"><router-view></router-view></el-main></el-container></el-container>
</template><script setup lang="ts">
import Menu from "./Menu.vue"
import Collapse from "./Collapse.vue";
import BreadCromb from "./BreadCromb.vue";
</script><style scoped lang="scss">
.mycontainer{height: 100%;.asside{background-color: #0a2542;// 使宽度自适应width: auto;}.header{background-color: rgb(255, 255, 255);color: #000;display: flex;align-items: center;}.mymain{background-color: rgb(244, 244, 244);}
}</style>
2. 效果图

相关文章:
19.面包屑导航制作
面包屑导航制作 官网:组件 | Element 1. 在layout下新建BreadCrumb.vue BreadCrumb.vue <template><div class"bread-text"><el-breadcrumb class"bred"separator"/"><el-breadcrumb-item v-for"item in…...
做动画?Animatediff 和 ComfyUI 更配哦!
如果从工作流和内存利用率的角度来说,Animatediff 和 ComfyUI 可能更配一些,毕竟制作动画是一个很吃内存的操作。 首先,我们需要在管理器中下载 Animatediff 插件,当然也可以直接导入听雨的工作流,然后在管理器的安装…...
笔记-python里面的xlrd模块详解
那我就一下面积个问题对xlrd模块进行学习一下: 1.什么是xlrd模块? 2.为什么使用xlrd模块? 3.怎样使用xlrd模块? 1.什么是xlrd模块? ♦python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel&…...
oracle将字符串中的字符和数字拆分开等功能
将字符串中的字符和数字拆分开 create or replace procedure F_GetNumber1( inString IN VARCHAR2,n_return1 out varchar2, n_return2 out varchar2) ISDCHAR VARCHAR2(1024); OUTCHAR VARCHAR2(1024); j number default 0; ulen number; BEGINOUTCHAR:;DCHAR:TRIM(inStr…...
汇编基础之使用vscode写hello world
汇编语言(Assembly Language) 概述 汇编语言(Assembly Language)是一种低级编程语言,它直接对应于计算机的机器代码(machine code),但使用了更易读的文本符号。每台个人计算机都有…...
APS计划排程系统如何打破装备使用约束
APS计划排程系统是离散制造型企业在计划控制方向的重要支撑,它提供的是交期预测、订单排产计划、物料采购计划、人力分配计划等等。近些几年来,多品种、小批量、多订单的生产模式,让企业的计划员应接不暇、疲累不堪,传统的人工经验…...
gigachad - suid
gigachadeasyftp利用、google反图搜索、 suid提权、s-nail 提权 主机发现 ┌──(kali㉿kali)-[~/桌面/OSCP] └─$ sudo netdiscover -i eth0 -r 192.168.44.138/24服务探测 ┌──(kali㉿kali)-[~/桌面/OSCP] └─$ sudo nmap -sV -A -T 4 -p- 192.168.44.138 |_/kingchad…...
QtScript模块
在Qt中,可以使用Qt Script模块来将C类和方法绑定到Qt脚本引擎中,从而使得可以在Qt脚本中调用这些C类和方法。以下是一个简单的示例,演示了如何在Qt中将C类暴露给Qt Script引擎: 假设有一个名为 MyClass 的C类,其头文件…...
qt中for循环不要使用循环中会更改的变量
检查代码,发现始终会少了一位,最后发现我在使用for循环时,懒省事,判断条件中使用的变量是涉及到循环体中更改的变量,代码如下,更直观 for (int i 0; i < m_images.size(); i) {packageToDBList[0].imag…...
spark独立集群搭建
spark独立集群搭建(不依赖Hadoop) 1、上传spark-2.4.5-bin-hadoop2.7.tgz至 /usr/local/moudel ,再解压到 /usr/local/soft tar -zxvf spark-2.4.5-bin-hadoop2.7.tgz -C /usr/local/soft/ 重命名 mv spark-2.4.5-bin-hadoop2.7/ spark-2.4.5 配…...
【BFS算法】广度搜索·由起点开始逐层向周围扩散求得最短路径(算法框架+题目)
0、前言 深度优先搜索是DFS(Depth Frst Search),其实就是前面所讲过的回溯算法,它的特点和它的名字一样,首先在一条路径上不断往下(深度)遍历,获得答案之后再返回,再继续往下遍历。…...
微信小程序---登录
手机号登录 手机号快速验证和手机号实时验证区别 手机号快速验证组件,平台会对号码进行验证,但不保证是实时验证;收费0.0.3元手机号实时验证组件,在每次请求时,平台均会对用户选择的手机号进行实时验证。收费0.0.4元…...
IPython大师课:提升数据科学工作效率的终极工具
IPython是一个增强的Python交互式shell,它提供了丰富的功能和易用性改进,特别适合进行数据分析、科学计算和一般的Python开发。本文将全面介绍IPython的基本概念、使用方法、主要作用以及注意事项。 一、IPython简介 1. IPython的起源 IPython最初由Fe…...
抖音素材网站平台有哪些?素材下载网站库分享
在这个视觉信息充斥的时代,抖音已经成为众多自媒体人展示才华的舞台。要在众多创作者中脱颖而出,不仅需要独特的创意,还需要优质的素材来支持你的内容制作。今天,我将介绍几个为抖音视频提供高品质素材的网站,包括国内…...
MODBUS TCP协议实例数据帧详细分析
MODBUS TCP协议实例数据帧详细分析 1.简介 2.ModbusTCP数据帧 2.1.报文头MBAP 2.2.帧结构PDU 3.ADU详细结构 3.1. 0x01:读线圈 3.2. 0x02:读离散量输入 3.3. 0x03:读保持寄存器 3.4. 0x04:读输入寄存器 3.5. 0x05:写单…...
Spring Boot启动与运行机制详解:初学者友好版
Spring Boot启动与运行机制详解:初学者友好版 随着微服务的兴起和容器化部署的流行,Spring Boot以其快速搭建、简单配置和自动化部署的特性,成为了众多开发者的首选。对于初学者而言,理解Spring Boot的启动与运行机制是掌握其精髓…...
Ubuntu 22.04 解决 firefox 中文界面乱码
问题复现 在为Ubuntu 22.04 Server安装完整的GNOME 42.01桌面后,将桌面语言设置为中文时,打开Firefox可能会出现中文乱码的问题。经过网上调查发现,这个问题是由Snap软件包引起的。 解决方案 为了避免在Ubuntu 22.04中文模式下的乱码问题…...
前端面试题日常练-day77 【面试题】
题目 希望这些选择题能够帮助您进行前端面试的准备,答案在文末 在Sass中,以下哪个功能用于将样式规则应用于多个选择器? a) extend b) mixin c) import d) include Sass中的嵌套规则(Nested Rules)有助于实现以下哪个…...
团队协同渗透测试报告输入输出平台部署
目录 简介 文章来源 部署环境 文件下载 开始安装 系统初始化 免责声明 结语 简介 因应监管部需求,国内访问Docker源pull镜像开始变得复杂且困难起来了,大佬github给的在线/离线安装脚本跑了很久也无法拉取到镜像,所以将以前的镜像打…...
vue3-父子通信
一个简单的vue3子组件调用父组件方法的demo <template> <div> <h2>Parent Component父组件</h2> <ChildComponent notify-parent"handleParentMethod" /> </div> </template> <script> import { ref } fr…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
Windows 下端口占用排查与释放全攻略
Windows 下端口占用排查与释放全攻略 在开发和运维过程中,经常会遇到端口被占用的问题(如 8080、3306 等常用端口)。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口,帮助你高效解决此类问题。 一、准…...
