vue前端自適應佈局，一步到位所有自適應

来源:https://www.cnblogs.com/lgx211/p/18348797
-Advertisement-
Play Games

title: 使用 createError 創建錯誤對象的詳細指南 date: 2024/8/8 updated: 2024/8/8 author: cmdragon excerpt: 摘要：本文介紹了createError函數在Nuxt應用開發中的使用方法，用於創建帶有附加元數據的錯誤對象，以提升 ...


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頁面，佈局建好，裡面的內容就可以自己隨意發揮了。

未覺池塘春草夢，階前梧葉已秋聲。記錄激動時刻，也造福後來人。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • UITableView的原理——探究及重新實現代碼
    我們非常激動地宣佈，詞雲圖大師（WordCloudMaster）現已正式上線Web端！這一全新版本為用戶帶來了更多的便捷和功能，讓創建和分享詞雲變得更加輕鬆。無論是企業、教育機構還是個人用戶，都可以通過Web端實現快速生成和定製屬於自己的詞雲圖。 https://studio.wordcloudma ...
  • JavaScript發展歷史
    JavaScript 作為一種編程語言，經歷了多次發展與演變，以下是其主要歷史里程碑： 1. 誕生與早期發展（1995-1999） 1995年: JavaScript 由 Brendan Eich 在網景公司（Netscape）發明，最初被稱為 Mocha，後來改名為 LiveScript，最終定名 ...
  • 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染
    title: 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染 date: 2024/8/12 updated: 2024/8/12 author: cmdragon excerpt: 摘要：本文介紹了Nuxt 3中的defineRouteRules功能，用於實現頁面 ...
  • HTML 引用
    title: 掌握 Nuxt 3 的頁面元數據：使用 definePageMeta 進行自定義配置 date: 2024/8/11 updated: 2024/8/11 author: cmdragon excerpt: 摘要：本文詳細介紹Nuxt 3框架中definePageMeta的使用方法，包 ...
  • 使用 defineNuxtRouteMiddleware 創建路由中間件
    title: 使用 defineNuxtRouteMiddleware 創建路由中間件 date: 2024/8/10 updated: 2024/8/10 author: cmdragon excerpt: 本篇文章介紹瞭如何使用 defineNuxtRouteMiddleware 創建和應用路由 ...
  • HTML 文本格式化
    摘要：目前 OpenTiny HUICharts 已經成功落地在華為內部100多個產品中，持續提升了用戶的可視化體驗。 本文分享自華為雲社區《OpenTiny HUICharts 正式開源發佈，一個簡單、易上手的圖表組件庫》，作者： OpenTiny。 引言 大家好！ 我們非常高興地跟大家宣佈，今天 ...
  • 使用 defineNuxtComponent`定義 Vue 組件
    title: 使用 defineNuxtComponent`定義 Vue 組件 date: 2024/8/9 updated: 2024/8/9 author: cmdragon excerpt: 摘要：本文介紹了在Nuxt 3中使用defineNuxtComponent輔助函數定義類型安全的Vue ...
  • 在 React 項目中 Editable Table 的實現
    我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：佳嵐 可編輯表格在數棧產品中是一種比較常見的表單數據交互方式，一般都支持動態的新增、刪除、排序等基礎功能。 交互分類 可編輯表格一般為兩種交互形式： 實時保存 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類