vue前端自適應(yīng)布局庙洼，一步到位所有自適應(yīng)
頁(yè)面展示
Snipaste_2024-08-08_13-52-11.png
Snipaste_2024-08-08_13-52-31.png
實(shí)現(xiàn)內(nèi)容
1顿痪，左右布局
- 左側(cè)固定寬帶镊辕，右側(cè)自適應(yīng)剩余的寬度。
- 中間一條分割線蚁袭，可以拖拉征懈，自適應(yīng)調(diào)整左右側(cè)的寬度。
- 左側(cè)的高度超長(zhǎng)自動(dòng)出現(xiàn)橫向滾動(dòng)條揩悄，左側(cè)寬度超長(zhǎng)卖哎，自動(dòng)出現(xiàn)豎向滾動(dòng)條。
2删性，上中下布局
- 最上面的 搜索條件 div 固定占用 100 px 高度亏娜，下面的 查詢條件 div 固定占用 30 px 高度，最下面的分頁(yè)固定占用高度蹬挺，頁(yè)面剩下的高度自動(dòng)分配給中間的表格內(nèi)容维贺。
- 表格內(nèi)容高度超過(guò)后自動(dòng)出現(xiàn)豎向滾動(dòng)條，寬度超出后自動(dòng)出現(xiàn)橫向滾動(dòng)條巴帮。
- 點(diǎn)擊按鈕溯泣，可以 隱藏/顯示 搜索條件 div 里面的內(nèi)容。
- 當(dāng)隱藏 搜索條件 div 里面的內(nèi)容時(shí)晰韵，中間表格的高度為：整個(gè)頁(yè)面的高度—操作按鈕div的高度—分頁(yè)div的高度发乔。
- 當(dāng)搜索條件 div 里面的內(nèi)容時(shí)，中間表格的高度為：整個(gè)頁(yè)面的高度—搜索條件div的高度—操作按鈕div的高度—分頁(yè)div的高度雪猪。
3栏尚，分辨率自適應(yīng)
- 加載即動(dòng)態(tài)實(shí)時(shí)計(jì)算高度，寬度
實(shí)現(xiàn)代碼
<template>
<div class="app-container">
<div class="left" :style="{ width: leftWidth + 'px' }">
<div class="right-center-left">
左邊的內(nèi)容只恨，可以很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />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">分頁(yè)</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;
// 計(jì)算 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; /* 自動(dòng)填滿剩余寬度 */
}
.div1 {
height: 100px;
background-color: #f0f0f0;
}
.div2 {
height: 30px;
background-color: #ddd;
}
.div3 {
overflow-x: auto; /* 添加橫向滾動(dòng)條 */
overflow-y: auto; /* 添加縱向滾動(dòng)條 */
background-color: #f5f5f5;
}
.div4 {
height: 200px;
background-color: #ccc;
}
</style>
實(shí)現(xiàn)感想
這個(gè)功能译仗，從畢業(yè)就開(kāi)始思索，直到八年后的今天成熟完善官觅，真是艱辛也是很不容易纵菌。目前市面上沒(méi)有見(jiàn)過(guò)有人實(shí)現(xiàn)，很多人都是只言片語(yǔ)的休涤，基本復(fù)制下來(lái)咱圆，無(wú)法達(dá)到效果。我這個(gè)一鍵復(fù)制到自己的項(xiàng)目功氨，就能實(shí)現(xiàn)了序苏，中間的坎坷不平，到了完全實(shí)現(xiàn)的這一刻捷凄，才覺(jué)得激動(dòng)不已忱详。
無(wú)任何坑，也沒(méi)有任何額外的引入跺涤，一個(gè)普普通通匈睁，最簡(jiǎn)單的vue頁(yè)面监透，布局建好，里面的內(nèi)容就可以自己隨意發(fā)揮了航唆。
未覺(jué)池塘春草夢(mèng)胀蛮，階前梧葉已秋聲。記錄激動(dòng)時(shí)刻佛点，也造福后來(lái)人醇滥。
