vue front-end adaptive layout, all adaptive in one step
Page Showcase
Realized content
1, left-right layout
- Fixed wide band on the left and adaptive remaining width on the right.
- A dividing line in the center that can be dragged and pulled to adaptively adjust the width of the left and right sides.
- Horizontal scrollbars appear automatically when the height of the left side is too long, and vertical scrollbars appear automatically when the width of the left side is too long.
2, Upper Middle Lower Layout
- The top search condition div is fixed at 100 px, the bottom query condition div is fixed at 30 px, the bottom pagination is fixed, and the rest of the page height is automatically allocated to the center table content.
- Vertical scrollbars appear automatically when the height of the table content is exceeded, and horizontal scrollbars appear automatically when the width is exceeded.
- Click the button to hide/show the contents of the search criteria div.
- When the content inside the search criteria div is hidden, the height of the center table is: the height of the entire page - the height of the action button div - the height of the pagination div.
- When searching for content inside the condition div, the height of the center table is: height of the entire page - height of the search condition div - height of the action button div - height of the pagination div.
3, Resolution Adaptive
- Load i.e. dynamically calculate height, width in real time
Implementation Code
<template>
<div class="app-container">
<div class="left" :style="{ width: leftWidth + 'px' }">
<div class="right-center-left">
Content on the left，It can be long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long.<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />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">query condition</div>
<div class="div2">
<button @click="toggleDiv1">push button 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">tab window (in a web browser etc)</div>
</div>
</div>
</template>
<script>
export default {
name: "AppContainer",
data() {
return {
isDragging: false,
leftWidth: 200,
showDiv1: true
};
},
computed: {
div3Height() {
const totalHeight = ;
const div2Height = 30;
const div4Height = 30;
const div1Height = this.showDiv1 ? 100 : 0;
// count div3 heights
return totalHeight - div2Height - div4Height - div1Height;
}
},
methods: {
startDragging(e) {
= true;
("mousemove", );
("mouseup", );
},
onDrag(e) {
if () {
const minWidth = 50;
const maxWidth = - 50;
const newLeftWidth = ;
if (newLeftWidth > minWidth && newLeftWidth < maxWidth) {
= newLeftWidth;
}
}
},
stopDragging() {
= false;
("mousemove", );
("mouseup", );
},
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; /* Automatic filling of the remaining width */
}
.div1 {
height: 100px;
background-color: #f0f0f0;
}
.div2 {
height: 30px;
background-color: #ddd;
}
.div3 {
overflow-x: auto; /* Adding a horizontal scrollbar */
overflow-y: auto; /* Add vertical scrollbar */
background-color: #f5f5f5;
}
.div4 {
height: 200px;
background-color: #ccc;
}
</style>
Reflections on Realization
This feature, from graduation on the beginning of thinking, until today after eight years of maturity and perfection, it is really hard and is not easy. Currently on the market have not seen anyone realize, many people are only words, basically copy down, can not achieve the effect. I this one-click copy to their own projects, it can be realized, the middle of the bumps and bruises, to the full realization of this moment, only to feel excited.
No pitfalls, no extra introductions, a plain, simple vue page, the layout is built, and the content inside is yours to play with as you wish.
Before I realize the dream of spring grass on the pond, the autumn sound of the sycamore leaves in front of the steps has already been heard. Record the exciting moments, but also for the benefit of future generations.