vue前端自适应布局,一步到位所有自适应

页面展示

在这里插入图片描述
在这里插入图片描述

实现内容

1,左右布局

  • 左侧固定宽带,右侧自适应剩余的宽度。
  • 中间一条分割线,可以拖拉,自适应调整左右侧的宽度。
  • 左侧的高度超长自动出现横向滚动条,左侧宽度超长,自动出现竖向滚动条。

2,上中下布局

  • 最上面的 搜索条件 div 固定占用 100 px 高度,下面的 查询条件 div 固定占用 30 px 高度,最下面的分页固定占用高度,页面剩下的高度自动分配给中间的表格内容。
  • 表格内容高度超过后自动出现竖向滚动条,宽度超出后自动出现横向滚动条。
  • 点击按钮,可以 隐藏/显示 搜索条件 div 里面的内容。
  • 当隐藏 搜索条件 div 里面的内容时,中间表格的高度为:整个页面的高度—操作按钮div的高度—分页div的高度。
  • 当搜索条件 div 里面的内容时,中间表格的高度为:整个页面的高度—搜索条件div的高度—操作按钮div的高度—分页div的高度。
    2,分辨率自适应
  • 加载即动态实时计算高度,宽度
实现代码

vue2 语法实现

<template><div class="app-container"><div class="left" :style="{ width: leftWidth + 'px' }"><div class="right-center-left">左边的内容,可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div></div><div class="divider" @mousedown="startDragging"></div><div class="right"><div v-if="showDiv1" class="div1">查询条件</div><div class="div2"><button @click="toggleDiv1">操作按钮 div1</button></div><div class="div3" :style="{ height: div3Height + 'px' }">1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div><div class="div4">分页</div></div></div>
</template><script>
export default {name: "AppContainer",data() {return {isDragging: false,leftWidth: 200,showDiv1: true};},computed: {div3Height() {const totalHeight = window.innerHeight;const div2Height = 30;const div4Height = 30;const div1Height = this.showDiv1 ? 100 : 0;// 计算 div3 的高度return totalHeight - div2Height - div4Height - div1Height;}},methods: {startDragging(e) {this.isDragging = true;document.addEventListener("mousemove", this.onDrag);document.addEventListener("mouseup", this.stopDragging);},onDrag(e) {if (this.isDragging) {const minWidth = 50;const maxWidth = window.innerWidth - 50;const newLeftWidth = e.clientX;if (newLeftWidth > minWidth && newLeftWidth < maxWidth) {this.leftWidth = newLeftWidth;}}},stopDragging() {this.isDragging = false;document.removeEventListener("mousemove", this.onDrag);document.removeEventListener("mouseup", this.stopDragging);},toggleDiv1() {this.showDiv1 = !this.showDiv1;}}
};
</script><style scoped>
.app-container {display: flex;height: 100vh;overflow: hidden;
}.left {overflow-x: auto;overflow-y: auto;white-space: nowrap;min-width: 90px;
}.divider {width: 5px;cursor: ew-resize;background-color: #ccc;
}.right {display: flex;flex-direction: column;height: 100%;flex: 1; /* 自动填满剩余宽度 */
}.div1 {height: 100px;background-color: #f0f0f0;
}.div2 {height: 30px;background-color: #ddd;
}.div3 {overflow-x: auto; /* 添加横向滚动条 */overflow-y: auto; /* 添加纵向滚动条 */background-color: #f5f5f5;
}.div4 {height: 200px;background-color: #ccc;
}
</style>

vue3 语法实现

<template><div class="app-container"><div class="left" :style="{ width: leftWidth + 'px' }">左边的内容,可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div><div class="divider" @mousedown="startDragging"></div><div class="right"><div v-if="showQueryDiv" class="right-query">搜索条件</div><div class="right-button"><div class="right-button-left">操作按钮</div><div class="right-button-right"><button @click="toggleQueryDiv">隐藏/展示 搜索条件</button></div></div><div class="right-table" :style="{ height: tableHeight + 'px' }">表格内容<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div><div class="right-page">分页内容</div></div></div>
</template><script>
import { ref, computed, onMounted, onUnmounted } from 'vue';export default {name: "AppContainer",setup() {const isDragging = ref(false);const leftWidth = ref(200);const showQueryDiv = ref(true);const tableHeight = computed(() => {const totalHeight = window.innerHeight;const buttonHeight = 30;const pageHeight = 30;const queryHeight = showQueryDiv.value ? 100 : 0;return totalHeight - buttonHeight - pageHeight - queryHeight;});const startDragging = (e) => {isDragging.value = true;document.addEventListener("mousemove", onDrag);document.addEventListener("mouseup", stopDragging);};const onDrag = (e) => {if (isDragging.value) {const minWidth = 50;const maxWidth = window.innerWidth - 50;const newLeftWidth = e.clientX;if (newLeftWidth > minWidth && newLeftWidth < maxWidth) {leftWidth.value = newLeftWidth;}}};const stopDragging = () => {isDragging.value = false;document.removeEventListener("mousemove", onDrag);document.removeEventListener("mouseup", stopDragging);};const toggleQueryDiv = () => {showQueryDiv.value = !showQueryDiv.value;};onMounted(() => {window.addEventListener("resize", onDrag);});onUnmounted(() => {window.removeEventListener("resize", onDrag);});return {leftWidth,showQueryDiv,tableHeight,startDragging,toggleQueryDiv};}
};
</script><style scoped>
.app-container {display: flex;height: 100vh;overflow: hidden;
}.left {overflow-x: auto;overflow-y: auto;white-space: nowrap;min-width: 90px;
}.divider {width: 5px;cursor: ew-resize;background-color: #ccc;
}.right {display: flex;flex-direction: column;height: 100%;flex: 1; /* 自动填满剩余宽度 */
}.right-query {height: 100px;background-color: #f0f0f0;
}.right-button {height: 30px;display: flex;justify-content: space-between; /* 左右对齐内容 */align-items: center; /* 垂直居中对齐 */background-color: #ddd;
}.right-button-left {margin-left: 5px;text-align: left;
}.right-button-right {margin-right: 5px;text-align: right;
}.right-table {overflow-x: auto; /* 添加横向滚动条 */overflow-y: auto; /* 添加纵向滚动条 */background-color: #f5f5f5;
}.right-page {height: 200px;background-color: #ccc;
}
</style>
实现感想

这个功能,从毕业就开始思索,直到八年后的今天成熟完善,真是艰辛也是很不容易。目前市面上没有见过有人实现,很多人都是只言片语的,基本复制下来,无法达到效果。我这个一键复制到自己的项目,就能实现了,中间的坎坷不平,到了完全实现的这一刻,才觉得激动不已。

无任何坑,也没有任何额外的引入,一个普普通通,最简单的vue页面,布局建好,里面的内容就可以自己随意发挥了。

未觉池塘春草梦,阶前梧叶已秋声。记录激动时刻,也造福后来人。

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

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

相关文章

媒体资讯视频数据采集-lux的使用

lux(annie)是个github上的一个开源项目&#xff0c;可以使用他来下载网上各个平台的视频、音频、图片。 支持的站点也不少**&#xff08;ps: 对于一些反爬机制较好的网站可能不能下载&#xff0c;比如抖音、快手&#xff09;** ​ github使用说明页面提供windows、linux、M…

SpringMVC (发送请求——>参数传递—— >响应数据)

设置请求访问路径 RequestMapper&#xff1a;将请求访问路径和我们业务层的方法联系起来 ResponseBody&#xff1a;将我们业务层方法的返回值转化为json&#xff0c;xml或其他格式的数据返回给页面 两种请求 get请求 post请求 测试案例 RequestMapping("/getNameAndAge&…

可观测性(observability)

一、定义 wiki百科的定义 In software engineering, more specifically in distributed computing, observability is the ability to collect data about programs’ execution, modules’ internal states, and the communication among components.[1][2] To improve obser…

Linux 快速构建LAMP环境

目录 部署方式&#xff1a; 基础环境准备&#xff1a; 1.安装Apache服务 &#xff08;1&#xff09;安装Apache &#xff08;2&#xff09;安装一些Apache的扩展包 2.安装PHP语言 &#xff08;1&#xff09;下载php软件仓库 &#xff08;2&#xff09;指定php安装版本…

HAProxy七层负载均衡配置方案

HAProxy 一、准备二、配置HAProxy服务器1. 下载HAProxy2. 编写配置文件3. 启动HAProxy服务 三、配置后端服务①配置web服务器②配置php服务器 四、测试 一、准备 准备5台CentOS7服务器&#xff0c;IP地址如下&#xff1a; HAProxy 192.168.152.71web1 192.168.152.72web2 192.…

第九届世界3D渲染大赛火热报名中

世界渲染大赛是一个汇聚世界顶尖CG艺术家的大赛&#xff0c;目前已经成功举办了八届&#xff0c;神仙打架般的作品让众多3D艺术家们直呼过瘾&#xff0c;如今第九届也在火热进行中&#xff0c;快来与众多世界顶尖艺术家们一决高下吧&#xff01;下面给大家介绍一下第九届的赛事…

成都数字产业中心崛起,树莓集团如何加速国际数字影像产业园的全球步伐?

在数字化浪潮的推动下&#xff0c;成都数字产业中心近年来强势崛起&#xff0c;展现出令人瞩目的发展态势。据统计&#xff0c;过去五年间&#xff0c;成都数字产业的年均增长率超过了 20%&#xff0c;这一数据充分证明了其强大的发展动力。而在这片充满活力与创新的土地上&…

《Unified Visual Relationship Detection with Vision and Language Models》ICCV2023

摘要 这项工作集中在训练单一的视觉关系检测器&#xff08;VRD&#xff09;&#xff0c;该检测器可以预测来自多个数据集的标签空间的并集。由于不同数据集的标签体系不一致&#xff0c;合并标签是一个挑战。作者提出了 UniVRD&#xff0c;一种新颖的自下而上的方法&#xff0…

MyIP:强大且简单好用!

在这个数字化的时代&#xff0c;IP地址就像是我们的网络身份证。各位在日常的工作中&#xff0c;肯定会会遇到需要和 IP 地址相关的需求。 今天和大家聊一聊一个非常好用的开源 IP 工具项目 - MyIP。 简介 MyIP一个开源IP工具箱&#xff0c;提供了一系列的网络检测工具&…

axios请求响应拦截器

目录 axios-拦截器 拦截器的作用 请求拦截器-基本写法: axios请求拦截器-统一设置token 需求: 核心步骤: 关键代码: 响应拦截器-基本写法: axios响应拦截器-统一处理token失效 需求: 核心步骤: 关键代码: axios响应拦截器-数据剥离 需求: 核心步骤: 关键代码: ax…

七、ESP32-S3上使用MicroPython点亮WS2812智能LED灯珠并通过web控制和JS颜色选择器改变灯珠颜色

本地代码集成离线iro.js库来添加一个颜色选择器控件&#xff0c;在无网络环境可以通过JavaScript将选中的颜色发送到服务器以改变LED颜色。以下是将iro.js集成到网页后的颜色图片。 Iro.js 地址API操作手册 color:change # 每当所选颜色发生变化时触发 - 无论是当用户与颜色选…

Oracle|DM 常用|不常用 SQL大口袋

目录 一、前言 二、SQL写法 1、sql获取某一条数据中的前一条和后一条 2、实现like多个值的查询&#xff08;Oracle和dm支持&#xff0c;MySQL未试过&#xff09; 3、start with connect by prior 使用方法 4、用hextoraw解决select、update、delete语句执行慢 5、ORA-00…

Vue+Element Plus后台管理主界面搭建实现

​ 续接Django REST Framework&#xff0c;使用Vite构建Vue3的前端项目 1. 后台管理系统主界面框架搭建 后台系统主界面搭建 新建后台管理文件目录 完成后台整体布局 // 1.主界面 index.vue<script setup lang"ts"></script><template><el-…

初识自然语言处理NLP

文章目录 1、简介2、自然语言处理的发展简史3、语言学理论句法学&#xff08;Syntax&#xff09;语义学&#xff08;Semantics&#xff09;语用学&#xff08;Pragmatics&#xff09;形态学&#xff08;Morphology&#xff09; 4、统计与机器学习方法n-gram 模型隐马尔可夫模型…

C++20中的模块

大多数C项目使用多个翻译单元(translation units)&#xff0c;因此它们需要在这些单元之间共享声明和定义(share declarations and definitions)。headers的使用在这方面非常突出。模块(module)是一种language feature&#xff0c;用于在翻译单元之间共享声明和定义。它们是某些…

怎么用云手机进行TikTok矩阵运营

TikTok作为炙手可热的社交媒体巨头&#xff0c;已经吸引了亿万用户的目光。随着科技的飞速发展&#xff0c;云手机的出现为TikTok矩阵运营注入了新的活力。本文将深入探讨云手机在TikTok矩阵运营中的实际应用&#xff0c;并分享一系列高效策略与技巧。 &#xff08;1&#xff0…

DGA上的动态规划

前言&#xff1a;之前都没有写过建模成有向图来动态规划的&#xff0c;但是这个题可以抽象成有向图来做 我们可以用方块的编号和高来确定底下的长和宽 其实这题说白了就是一个记忆化搜索&#xff0c;但是不知道能不能建模出来而已 #define _CRT_SECURE_NO_WARNINGS #include&l…

39.【C语言】指针(重难点)(D)

目录 10.野指针 *定义 *案例 11.野指针规避方法 *初始化 *防止越界 *指针变量不再使用时&#xff0c;及时置NULL&#xff0c;指针使用之前检查有效性 *避免返回局部变量的地址 *assert断言 12.assert断言 *解释 *作用 *优点 *启用assert的开关 往期推荐 承接上篇 38.【C语言】指…

Qt实现类似淘宝商品展示看板功能简版

前一篇文章的简化版本只有浏览功能&#xff0c;前一篇文章链接如下&#xff1a; Qt实现类似淘宝商品看板的界面&#xff0c;带有循环翻页以及点击某页跳转的功能 效果如下&#xff1a; 代码留给有需要的人。 #ifndef ModelDashboardGroup_h__ #define ModelDashboardGroup_…

选择叮咚门铃的材质注意事项

在挑选叮咚门铃时&#xff0c;材质是一个不容忽视的重要因素。合适的材质不仅能确保门铃的耐用性和美观度&#xff0c;还能影响其性能和使用体验。 塑料材质的叮咚门铃是较为常见且经济实惠的选择。它轻巧且易于成型&#xff0c;可以被设计成各种独特的形状和颜色&#xff0c;为…