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

已于 2024-08-08 18:03:39 修改
阅读量1.4k 收藏 19
点赞数 9
分类专栏： vue 文章标签： vue.js 前端 自适应 左右布局 上中下布局
于 2024-08-08 13:55:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43750212/article/details/141025026
版权
页面展示

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

实现内容

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

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

lgx211
关注
专栏目录
7种方法实现CSS左侧固定，右侧自适应布局，css画三角形，上三角形，下三角形，左三角型，右下三角形，右上三角形，左上三角形，
VAN
04-06 63
左侧内容固定，右侧自动占满屏幕布局是开发中常见的布局，通常可见于一些管理后台：左侧展示菜单栏，右侧展示管理内容。
vue开发页面自适应屏幕尺寸（仅供参考）
hudabao888666的博客
02-10 2514
vue开发页面自适应屏幕尺寸（仅供参考）
前端页面自适应的7种办法
mao871863224的博客
04-11 4258
项目开发中经常遇见需要自适应页面的办法，下面总结几种经常用到的，欢迎补充～
vue项目屏幕自适应（有大屏）
yunbabac的博客
10-04 8293
目前做项目都是基于1920*1080窗口大小 有的要求屏幕自适应 我一直这样子做，挺简单的，今天分享给大家 第一步安装一个包 只在开发环境需要 第二步 在vue.config.js文件中加入以下内容（没有就创建一个，与src目录同级） module.exports={ css:{ extract:false,//false表示开发环境,true表示生成环境 sourceMap:false, loaderOptions...
Vue中web端全局自适应
lowers_1的博客
04-18 1206
web端实现全局自适应
vue实现页面自适应布局(rem)
m0_54797890的博客
04-30 4520
在前端开发的时候经常会遇到这样的困惑，设计师给你的设计稿的尺寸和页面的尺寸不一致，导致了页面无法正常显示。这时候，使用rem单位进行操作是一种不错的方法。以下以vue中的代码为示例，设计师的设计稿尺寸为1920px。 第一步，安装两个小插件： npm install lib-flexible -S npm install px2rem-loader -D 第二步，安装好后在main.js中导入第一个插件： // main.js import 'lib-flexible' 第三步，修改配置： 在 vue-
vue自适应布局（各种浏览器，分辨率）
一步一个脚印，踏实努力，向着目标前进
08-25 9064
需要注意的是，自适应布局并不是一种简单的解决方案，需要根据具体的需求和设计来选择合适的方法和技术。同时，还需要进行兼容性测试，确保在各种浏览器和分辨率下都能正常显示和使用。以上代码示例展示了五种实现Vue自适应布局的方法，根据具体的需求和设计，选择合适的方法来实现自适应布局。请注意根据实际情况进行适当的调整和修改。Vue自适应布局是指在不同浏览器和分辨率下，能够自动调整页面布局以适应不同的屏幕尺寸和设备。/* 引入Bootstrap样式文件 */
vue 自适应的方法
花生日记
06-02 2895
我们知道 vue的 render方法可以将多个属性映射到一个新的属性上，但是 vue的 render方法无法直接对不同浏览器下的效果进行自适应，也就是无法在不同浏览器下显示不同的效果，所以我们需要将对象的属性映射到其他属性上，从而实现自适应。1、我们在实例中的< input></input>,< style></style>使用的是 rhino. dll，所以我们在实例中直接使用了这个变量，使用的时候需要注意，因为有很多项目的 dll和 js版本不同，所以需要修改 require （）方法的值。
Vue前端项目自适应布局
长不大的大灰狼
05-30 6983
Vue前端项目自适应布局一、单位尺寸二、基于rem实现自适应布局 一、单位尺寸 px % vw、vh: 窗口 em: 针对父元素的font-size rem：“root em”的缩写，是一个相对长度单位；rem单位作用于非根元素时，相对于根元素（html）字体大小，rem单位作用于根元素字体大小时，相对于其出初始字体大小。 说明： 谷歌浏览器，字体的默认大小是16px; 如果父元素item1的font-size=50px，那么子元素item2的1em=50px。 如果html的顶层font-size为
Axios和vue3自适应布局方案
09-04
在本文中，我们将深入探讨如何在Vue3项目中结合Axios实现数据交互，并采用Element-Plus库进行自适应布局设计。同时，我们还将讨论如何利用Mock数据和Vue Router来优化开发流程。 首先，Vue3是Vue.js框架的最新版本...
Vue 自适应高度表格的实现方法
10-15
在Vue中实现自适应高度的表格是一项常见的需求，尤其是在处理大量数据时，保持页面布局整洁，避免全局滚动条出现，是提升用户体验的关键。本文将详细介绍如何在Vue项目中，特别是在使用Element-UI库的情况下，实现...
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
最新发布
weixin_41346436的博客
07-04 1287
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
vue 图片自适应排列插件_vue自适应布局3种方法
weixin_39997300的博客
01-13 2375
自适应是每个开发者必走的路，该篇掘文是前者踩过一些坑 而踏出来的几条路，希望这些经验能在开发的过程中帮助到大家！！！1.传统布局 => rem//方式一const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;document.querySelector('html').styl...
vue项目自适应解决方案
lyn1772671980的博客
12-11 2345
场景：页面要实现在不同分辨率，不同设备下，页面布局等比缩放 解决思路： 设置根目录html元素的font-size，其他元素根据根元素，使用rem相对单位，实现等比缩放。 监听浏览器resize，设置根元素html的font-size，其他元素参考html的font-size实现自适应。 代码如下： /** * 设置跟节点 fonst-size */ export const setRootHtmlFontSize = () => { const rootHtmlDOM = d
【Vue 学习】- VueJS 简单入门
2401_84411557的博客
05-01 296
2、MVVM 模式MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是 ViewModel。
rem.js
睡不够
10-09 480
(function(win,lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flex
vue页面自适应屏幕
08-20
要使Vue页面自适应屏幕，您可以使用CSS中的媒体查询和Flexbox布局来实现响应式设计。下面是一些步骤： 1. 在Vue组件的样式部分添加媒体查询，以根据不同的屏幕尺寸应用不同的样式。媒体查询可以根据屏幕宽度或设备特性进行条件判断。例如，以下媒体查询将在屏幕宽度小于等于768px时应用样式： ```css @media (max-width: 768px) { /* 样式规则 */ } ``` 2. 使用Flexbox布局来实现页面的自适应。Flexbox可以使元素在容器中自动填充可用空间，并根据需要进行换行或缩放。在Vue组件的模板部分，使用Flexbox属性来控制元素的布局。例如，以下代码将在父容器中使用Flexbox布局，并使子元素平均分布在水平方向： ```html <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> ``` ```css .container { display: flex; justify-content: space-between; } ``` 3. 使用CSS单位来调整元素的尺寸和间距。相对单位（如百分比）可以根据屏幕尺寸进行自适应调整。另外，可以使用CSS的`@media`规则和`min-width`、`max-width`属性来定义不同屏幕尺寸下的样式。例如，以下代码将在屏幕宽度小于等于768px时将元素宽度设置为100%： ```css @media (max-width: 768px) { .item { width: 100%; } } ``` 通过结合媒体查询、Flexbox布局和CSS单位，您可以实现Vue页面的自适应屏幕效果。根据项目需求和设计要求，您可以调整和定制这些样式规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值