vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局

vue elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局

疑问点:iframe无法高度100%,如果写了100%就会有滚动条,所以只写了99.5%

【效果图】

路由示例

const routes = [{title: 'Index',path: '/',name: "Index",component: () => import('@/views/Index.vue'),},{title: 'TEST',path: '/TEST', // 使用内部页面时,路径为 "#/TEST"name: "TEST",component: () => import('@/views/TEST.vue'),},
]

页面完整代码

<template><div class="container"><div class="top"><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">Home</el-menu-item><el-submenu index="2"><template slot="title">Options</template><el-menu-item index="2-1">Option1</el-menu-item><el-menu-item index="2-2">Option2</el-menu-item><el-submenu index="2-4"><template slot="title">Option3</template><el-menu-item index="2-4-1">Option3-1</el-menu-item><el-menu-item index="2-4-2">Option3-2</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>Msg</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Order</a></el-menu-item></el-menu></div><div class="wrap"><div class="l"><p style="margin-top: 32px;">aside-bar</p></div><div class="r"><div class="bread-wrap"><el-breadcrumb separator="/"><el-breadcrumb-item>首页</el-breadcrumb-item><el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item></el-breadcrumb></div><div class="iframe-wrap"><iframe :src="iframeUrl" width="100%" height="99.5%" frameborder="0"></iframe></div></div></div></div>
</template><script>
export default {data() {return {activeIndex: '1',// iframeUrl: '#/TEST',  // 关键点:使用内部页面的话,要按这样写iframeUrl: 'https://www.baidu.com',}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}
}
</script><style scoped lang="less">
.container {display: flex;flex-direction: column;height: 100vh;color: #fff;&>.top {height: 48px;background: #212121;}&>.wrap {flex: 1;display: flex;height: 0;&>.l {width: 200px;background: #212121;}&>.r {overflow-y: hidden;display: flex;flex-direction: column;flex: 1;width: 0;background: #fff;.bread-wrap {display: flex;align-items: center;height: 48px;}.iframe-wrap {overflow-y: auto;flex: 1;height: 0;}}}
}.el-menu {height: 100%;background: transparent;
}/deep/.el-menu--horizontal>.el-submenu .el-submenu__title,
.el-menu--horizontal>.el-menu-item,
.el-menu--horizontal>.el-submenu .el-submenu__title {height: 48px;line-height: 48px;color: #ccc;
}.el-menu--horizontal>.el-menu-item.is-active {color: #fff;
}.el-menu.el-menu--horizontal {border-bottom: solid 1px #000;
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Coggle数据科学 | RAG编码模型对比:谁与OpenAI最为相似?

本文来源公众号“Coggle数据科学”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;RAG编码模型对比&#xff1a;谁与OpenAI最为相似&#xff1f; 在设计检索增强型生成&#xff08;RAG&#xff09;系统时&#xff0c;选择嵌入模型…

golang分布式缓存项目 Day1 LRU 缓存淘汰策略

注&#xff1a;该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习。 LRU缓存淘汰策略 三种缓存淘汰策略 FIFO&#xff08;First In, First Out&#xff09;先进先出 原理&…

工业相机选取

1.相机分类&#xff1a; 1.1 在相机曝光方式中&#xff0c;全局曝光和卷帘曝光是两种主流技术。CCD相机通常采用全局曝光方式&#xff0c;而CMOS相机则可能采用卷帘曝光。 面阵相机与全局曝光关联与区别 关联&#xff1a;面阵相机可以使用全局曝光作为曝光方式&#xff0c;但…

如何查看电脑关机时间

要查看电脑的关机时间&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 打开事件查看器&#xff1a;按下键盘上的Windows键R键&#xff0c;然后在弹出的运行对话框中输入"eventvwr.msc"&#xff0c;并按下Enter键。 2. 在事件查看器窗口中&#xff0c;单击左侧窗…

jwt用户登录,网关给微服务传递用户信息,以及微服务间feign调用传递用户信息

1、引入jwt依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency> 2、Jwt工具类&#xff0c;生成token以及解析token package com.niuniu.gateway.uti…

SQL练习(2)

题源&#xff1a;牛客官网 选择题 假设创建新用户nkw&#xff0c;现在想对于任何IP的连接&#xff0c;仅拥有user数据库里面的select和insert权限&#xff0c;则列表语句中能够实现这一要求的语句是&#xff08;&#xff09; A grant select ,insert on *.* to nkw% B grant…

【MySQL从入门到放弃】InnoDB磁盘结构(一)

前言 从MySQL 5.5版本开始默认 使用InnoDB作为引擎&#xff0c;它擅长处理事务&#xff0c;具有自动崩溃恢复的特性&#xff0c;在日常开发中使用非常广泛。 下面是官方的InnoDB引擎架构图&#xff0c;主要分为内存结构和磁盘结构两大部分。 上一篇文章&#xff0c;我们解析了…

RT-DETR融合CVPR[2020]轻量化卷积模块Ghost Module模块

RT-DETR使用教程&#xff1a; RT-DETR使用教程 RT-DETR改进汇总贴&#xff1a;RT-DETR更新汇总贴 《GhostNet: More Features from Cheap Operations》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/abs/1911.11907 代码链接&#xff1a;GitHub - huawei-noah/Effici…

《TCP/IP网络编程》学习笔记 | Chapter 11:进程间通信

《TCP/IP网络编程》学习笔记 | Chapter 11&#xff1a;进程间通信 《TCP/IP网络编程》学习笔记 | Chapter 11&#xff1a;进程间通信进程间通信的基本概念通过管道实现进程间通信通过管道进行进程间双向通信 运用进程间通信习题&#xff08;1&#xff09;什么是进程间通信&…

2024 kali操作系统安装Docker步骤

1、更新系统 在开始之前&#xff0c;确保你的Kali系统是最新的。打开终端并运行以下命令&#xff1a; apt update 2、安装 apt install docker.io 3、查看启动状态 systemctl status docker 4、安装完 Docker 后&#xff0c;启动 systemctl start docker 5、启动并使…

LLMs之Code:Github Spark的简介、安装和使用方法、案例应用之详细攻略

LLMs之Code&#xff1a;Github Spark的简介、安装和使用方法、案例应用之详细攻略 目录 Github Spark的简介 Github Spark的安装和使用方法 1、安装 2、使用方法 Github Spark的案例应用 Github Spark的简介 2024年10月30日&#xff0c;GitHub 重磅发布GitHub Spark 是一…

MySQL数据库:SQL语言入门 【上】(学习笔记)

SQL&#xff08;Structured Query Language&#xff09;是结构化查询语言的简称&#xff0c;它是一种数据库查询和程序设计语言&#xff0c;同时也是目前使用最广泛的关系型数据库操作语言。&#xff08;95%适用于所有关系型数据库&#xff09; 【 SQL是关系型数据库通用的操作…

腾讯云nginx SSL证书配置

本章教程,记录在使用腾讯云域名nginx证书配置SSL配置过程。 一、nginx配置 域名和证书,替换成自己的即可。证书文件可以自定义路径位置。服务器安全组或者防火墙需要开放80和443端口。 server {#SSL 默认访问端口号为 443listen 443 ssl; #请填写绑定证书的域名server_name c…

使用electron-egg把vue项目在linux Ubuntu环境下打包并安装运行

electron-egg一个入门简单、跨平台、企业级桌面软件开发框架https://www.kaka996.com/electron-egg 跳转地址 1,使用 git下载代码到本地,如果没有git需要进行安装 # gitee git clone https://gitee.com/dromara/electron-egg.git # github git clone https://github.com/dro…

Nginx配置自带的stub状态实现活动监控指标

场景 为了确保应用以最佳性能和精度运行&#xff0c;需要清晰地了解有关其活动的监控指标。 NGINX 提供了多种监控选项&#xff0c;例如 stub 状态。 注&#xff1a; 博客&#xff1a;霸道流氓气质-CSDN博客 实现 启用 NGINX stub 状态 启用 NGINX HTTP 服务器内 locati…

vscode下nuget包的本地引入方法

优势&#xff1a; nuget包的本地引入可以方便打包后的本地测试&#xff0c;确保打包正确、功能完善后再上传至nuget服务端本地引入方式也极为简单&#xff0c;三步操作即可搞定&#xff0c;熟悉之后这个操作2分钟内就可以搞定 具体步骤&#xff08;以引入Epic.RobotService包…

【知识科普】SPA单页应用程序介绍

SPA单页应用程序 概述和传统的多页应用有什么区别&#xff1f;用户体验架构和开发性能和优化SEO&#xff08;搜索引擎优化&#xff09;维护和扩展 如何优化SEO服务端渲染和预渲染有什么区别&#xff1f; 概述 SPA&#xff0c;全称为Single Page Application&#xff08;单页应用…

免费HTML模板和CSS样式网站汇总

HTML模板&#xff1a;&#xff08;注意版权&#xff0c;部分不可商用&#xff09; 1、Tooplate&#xff0c;免费HTML模板下载 Download 60 Free HTML Templates for your websitesDownload 60 free HTML website templates or responsive Bootstrap templates instantly from T…

深入理解接口测试:实用指南与最佳实践5.0(二)

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…

【go从零单排】Random Numbers、Number Parsing

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 这里是引用 &#x1f4bb;代码 Random Numbers package mainimport ("fmt…