快捷導(dǎo)航

關(guān)于vue自適應(yīng)布局(各種瀏覽器,分辨率)的示例代碼

更新時間：2022年09月06日 09:47:33 作者：KinHKin

這篇文章主要介紹了vue自適應(yīng)布局（各種瀏覽器，分辨率）,主要使用了flex布局的flex:1屬性和自適應(yīng)的css+vh+百分比這種方式，開局設(shè)置overflow:hidden，主體main部分要設(shè)置：overflow:auto，需要的朋友可以參考下

1.前言

spa頁面的layout布局對于前端項目的影響至關(guān)重要，在我們進(jìn)行web端開發(fā)的時候，前端的各種大小屏幕，各種內(nèi)核的瀏覽器不同，會導(dǎo)致我們的頁面呈現(xiàn)出不一樣的效果，如何進(jìn)行更好的取舍，怎么能夠達(dá)到產(chǎn)品對于系統(tǒng)展示效果的滿意度，其實(shí)我們要前端有一套布局理念，這種理念指導(dǎo)我們?nèi)绾芜M(jìn)行優(yōu)雅布局，怎么才能不被不合理的需求左右。理念分為以下幾點(diǎn)：

整體布局，上左右風(fēng)格，或者上下風(fēng)格符合或者復(fù)雜的上菜單，左菜單，右內(nèi)容風(fēng)格，符合spa的菜單操作方式菜單nav部分固定寬度，配合收起，展開效果；頭部固定高度，內(nèi)容區(qū)域flex:1；版本部分固定高度，固定位置內(nèi)容區(qū)域需要適應(yīng)不同的分辨率，做瀏覽器的適配需要適配瀏覽器的百分比縮放的問題

預(yù)覽圖片如下：

現(xiàn)在布局實(shí)現(xiàn)的是頭，左側(cè)菜單，尾部固定，內(nèi)容區(qū)域自適應(yīng)布局的方案，最重要的是需要解決的是main里面的適應(yīng)分辨率，瀏覽器內(nèi)核的問題，往下看??

2.vue的布局風(fēng)格

2.1vue3需要配合element plus進(jìn)行布局

安裝 $ npm install element-plus --save

引入 main.ts

import { createApp } from "vue";

import { createPinia } from "pinia";

import App from "./App.vue";

import router from "./router";

import ElementPlus from "element-plus";

import "element-plus/dist/index.css";

import "./assets/main.css";

const app = createApp(App);

app.use(ElementPlus);

app.use(createPinia());

app.use(router);

app.mount("#app");

2.2src下面創(chuàng)建layout文件夾

入口文件layoutIndex.vue，三個子組件

layoutIndex入口文件較為重要：

<script setup lang="ts">
import layoutHeader from "./layoutHeader.vue";
import layoutMain from "./layoutMain.vue";
import layoutFooter from "./layoutFooter.vue";
import menu from "./menu";
import { RouterLink } from "vue-router";
</script>
 
<template>
  <div class="common-layout">
    <el-container>
      <el-header><layout-header></layout-header></el-header>
      <el-container>
        <el-aside width="200px">
          <nav class="nav-class">
            <RouterLink
              v-for="(item, index) in menu"
              :key="'menu' + index"
              :to="item.url"
              >{{ item.title }}{{ index + 1 }}</RouterLink
            >
          </nav>
        </el-aside>
        <el-container>
          <el-main><layout-main></layout-main></el-main>
          <el-footer><layout-footer></layout-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}
.common-layout {
  height: 100vh;
}
.el-container {
  overflow: hidden;
}
.el-container.is-vertical {
  height: 100%;
}
.nav-class {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
}
.nav-class a {
  min-height: 35px;
  line-height: 35px;
  color: #fff;
}
.nav-class a:hover {
  color: rgb(151, 219, 50);
}
.nav-class a:focus {
  color: rgb(151, 219, 50);
}
 
.el-aside {
  background-color: lightslategrey;
}
</style>

頭部文件layoutHeader

<template>
  <div class="common-layout-header">header</div>
</template>
<style>
.el-header {
  margin: 0;
  padding: 0;
  height: 68px;
  background-color: aliceblue;
  text-align: center;
  line-height: 68px;
}
</style>

layoutFooter文件代碼

<template>
  <div class="common-layout-footer">footer</div>
</template>
<style>
.el-footer {
  margin: 0;
  padding: 0;
  height: 68px;
  background-color: azure;
  text-align: center;
  line-height: 68px;
}
</style>

main文件代碼，就是路由放置區(qū)域：

<script setup lang="ts">
import { RouterView } from "vue-router";
</script>
<template>
  <div class="common-layout-main"><RouterView /></div>
</template>
<style>
.el-main {
  overflow: auto;
  height: 100%;
}
</style>

滾動效果：頭部尾部不動，css控制，flex布局，沒有position布局