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

于 2024-08-09 16:21:47 发布
阅读量239 收藏 3
点赞数 8
文章标签： vue.js 前端 状态模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dsgdauigfs/article/details/141057131
版权

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

页面展示

实现内容

1，左右布局

  • 左侧固定宽带，右侧自适应剩余的宽度。

  • 中间一条分割线，可以拖拉，自适应调整左右侧的宽度。

  • 左侧的高度超长自动出现横向滚动条，左侧宽度超长，自动出现竖向滚动条。

2，上中下布局

  • 最上面的 搜索条件 div 固定占用 100 px 高度，下面的 查询条件 div 固定占用 30 px 高度，最下面的分页固定占用高度，页面剩下的高度自动分配给中间的表格内容。

  • 表格内容高度超过后自动出现竖向滚动条，宽度超出后自动出现横向滚动条。

  • 点击按钮，可以 隐藏/显示 搜索条件 div 里面的内容。

  • 当隐藏 搜索条件 div 里面的内容时，中间表格的高度为：整个页面的高度—操作按钮div的高度—分页div的高度。

  • 当搜索条件 div 里面的内容时，中间表格的高度为：整个页面的高度—搜索条件div的高度—操作按钮div的高度—分页div的高度。

3，分辨率自适应

  • 加载即动态实时计算高度，宽度

实现代码

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页面，布局建好，里面的内容就可以自己随意发挥了。

文章转载自：lgx211

原文链接：https://www.cnblogs.com/lgx211/p/18348797

体验地址：引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

工业甲酰苯胺
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2023前端面试
FrontEndEngineer的博客
02-08 1545
obj对象想要获取name或者say，首先判断自己的属性当中有没有，如果没有找到，那么就在__proto__属性中去找，而这个时候__proto__与Person的prototype是相等的，也就是__proto__指向Person，那么便可以找到name和say。为了处理异步，当触发事件的时候，会通过dispatch来访问action中的方法，actions中的commit会触发mutation中的方法从而修改state里的值，通过getter把数据更新到视图中。这些都是计算属性无法做到的。
Axios和vue3自适应布局方案
09-04
在本文中，我们将深入探讨如何在Vue3项目中结合Axios实现数据交互，并采用Element-Plus库进行自适应布局设计。同时，我们还将讨论如何利用Mock数据和Vue Router来优化开发流程。 首先，Vue3是Vue.js框架的最新版本...
vue项目屏幕自适应（响应式布局）
dream_will_true的博客
04-25 8974
自适应布局rem，媒体查询@media还有postcss-px-to-viewport
前端vue框架中遇到的一些问题
WhoopD的博客
03-08 1423
本人新手小白一枚~总结一下自己开发中遇到的一些小问题和解决办法。 最常见的就是this.$nextTick(()=>{})的使用。一般从后端接收的值还没有获取到，但就要使用，就会造成当前值空。此时需要一个延迟才能获取。 vue父子组件传递过程中，如果想要在父组件里为子组件添加点击事件，@click是不生效的，需要用到@click.native的原生事件。 js向vue中append一个div加上样式不生效。因为vue中scoped样式都含有’data-v-1893249‘，去掉scoped
【Vue】vue开发环境搭建教程（详细）
花北城的博客
09-05 580
本专栏为 前端【Vue】专栏，主要介绍Vue知识点。对于刚进入计算机世界的学生来说，学习课本上的知识是远远不够的，并且国内教材偏旧，所以需要我们通过互联网自主学习。这里普及一个知识：HTML已不仅仅只能开发Web，也可以开发移动端（AndroidiOS），所以本专栏也会介绍 移动端的开发。我个人将移动端开发，分为两大方向：①原生开发最早一批，使用安卓开发工具包（Android SDK）和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。
Vue-Router路由搭建 | Vue-Router 动态路由（route.push和route.replace、路径参数 用route.params和route.query暴露）
weixin_42479421的博客
09-25 699
路由设计并搭建：静态路由如何配置，动态路由是什么。带参数的动态路由配置（router中通过路径参数 path:'/:id' 实现，通过route.params 或 route.query暴露出来)、动态路由通过route.push或route.replace手动导航
前端八股文之葵花宝典
最新发布
JimWen's Blog
11-16 119
因为组件可能在应用中多次被使用而被多次实例化，组件的是个函数可以确保每个实例化后的实例有独立的作用域，从而确保组件实例化后的data中的数据不会相互污染。而new Vue生成的是根应用实例，只有一个。防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 应用场景： 提交按钮、用户注册时候的手机号验证、邮箱验证。
【Vue前端】使用 videojs 做 hls 直播流遇到的问题及解决方案总结（销毁、反复加载视频流、http-flv 低延时优化解决方向）
热门推荐
一个努力学习的程序猿
09-09 2万+
该博文主要用于自我总结。文中内容就是在 Vue 项目中，使用 videojs 实现 hls 直播流的播放。由于文中参考了很多文章，所以重合的部分就不在这里展现，如有需要即可前往原文章查阅。而本文主要是用于记录在这过程中遇到的问题及其解决方案......
div模拟textarea文本域轻松实现高度自适应
yjxfox的专栏
05-31 727
一、关于textarea文本域以及高度自适应 textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框： 作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条，高度固执地岿然不动。所
Vue 自适应高度表格的实现方法
10-15
在Vue中实现自适应高度的表格是一项常见的需求，尤其是在处理大量数据时，保持页面布局整洁，避免全局滚动条出现，是提升用户体验的关键。本文将详细介绍如何在Vue项目中，特别是在使用Element-UI库的情况下，实现...
vue中echarts3.0自适应的方法
08-27
Vue 中 ECharts 3.0 自适应方法 ECharts 是一个流行的数据可视化库，广泛应用于各种数据分析和展示场景中。在 Vue 项目中使用 ECharts 可以快速创建丰富的数据可视化效果。然而，在使用 ECharts 时，如何使图表...
Vue实现input宽度随文字长度自适应操作
10-15
主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue中移动端自适应方案
10-17
在Vue.js中，实现移动端自适应是至关重要的，因为它确保了应用在不同尺寸的设备上都能呈现出良好的用户体验。本文将详细解析两种常见的Vue移动端自适应方案，并提供实践中的具体步骤。 **方案一：自定义动态调整`...
详解vue-cli中使用rem,vue自适应
11-27
Vue CLI项目中使用`rem`和实现自适应布局可以帮助开发者创建响应式的用户体验。下面将详细解释`rem`的工作原理以及在Vue CLI项目中如何配置和使用。 ### 1. `rem`单位介绍 `rem`（root em）是CSS中的长度单位，...
vue+elementUI 实现内容区域高度自适应的示例
01-18
步骤很简单： 通过动态绑定属性给<el></el>绑定高度，而高度通过 innerHeight 获取，减去你的头部和底部高度，剩下的就是整个内容区域的高度了！话不多说，上代码 //defaultHeight是绑定的属性 ...
可缩放、拖动、自适应布局组件demo
02-27
总结来说，"可缩放、拖动、自适应布局组件demo"是一个结合了拖放、自适应布局和嵌套布局功能的前端示例，它展示了如何利用现代Web技术创建灵活、互动性强的用户界面。这种组件对于提升Web应用的用户体验和交互性具有...
Vue+iView自适应后台模板.rar
11-12
Vue+iView自适应后台模板是一款基于Vue.js框架和iView UI组件库的高效、美观的后台管理系统模版。它专为构建支持PC端和移动端的Web应用设计，提供了丰富的功能和优秀的用户体验。以下是对这套模板及其相关技术栈的...
vue前端自适应屏幕大小
11-15
为了实现Vue前端自适应屏幕大小，可以使用CSS的媒体查询和rem单位。媒体查询可以根据不同的屏幕大小应用不同的CSS样式，而rem单位可以根据根元素的字体大小进行相对大小的设置。 以下是一个简单的实现方法： 1.在index.html文件中设置根元素的字体大小为屏幕宽度的1/10，即1rem等于屏幕宽度的1/10： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue App</title> <style> html { font-size: calc(100vw / 10); } </style> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> ``` 2.在CSS文件中使用rem单位进行样式设置，例如： ```css /* 在屏幕宽度小于600px时，字体大小为16px */ @media (max-width: 600px) { html { font-size: 16px; } } /* 在屏幕宽度大于600px时，字体大小为20px */ @media (min-width: 600px) { html { font-size: 20px; } } /* 使用rem单位设置元素的宽度和高度 */ .container { width: 20rem; height: 10rem; } ``` 这样，当屏幕宽度小于600px时，根元素的字体大小为16px，1rem等于16px，而当屏幕宽度大于等于600px时，根元素的字体大小为20px，1rem等于20px。在CSS中使用rem单位设置元素的宽度和高度时，就可以根据屏幕大小进行自适应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值