vue页面实现分屏
Vue 页面实现分屏的方法
使用 CSS Flexbox 布局
通过 Flexbox 可以轻松实现分屏效果。创建一个父容器，设置 display: flex，子元素根据需要设置宽度或比例。
<template>
<div class="split-screen">
<div class="left-pane">左侧内容</div>
<div class="right-pane">右侧内容</div>
</div>
</template>
<style>
.split-screen {
display: flex;
height: 100vh;
}
.left-pane {
flex: 1;
background: #f0f0f0;
}
.right-pane {
flex: 1;
background: #e0e0e0;
}
</style>使用 CSS Grid 布局
Grid 布局提供了更灵活的分屏方式，适合复杂的分屏需求。
<template>
<div class="split-screen">
<div class="left-pane">左侧内容</div>
<div class="right-pane">右侧内容</div>
</div>
</template>
<style>
.split-screen {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
}
.left-pane {
background: #f0f0f0;
}
.right-pane {
background: #e0e0e0;
}
</style>动态调整分屏比例
结合 Vue 的响应式特性，可以实现动态调整分屏比例。
<template>
<div class="split-screen">
<div class="left-pane" :style="{ flex: leftRatio }">左侧内容</div>
<div class="right-pane" :style="{ flex: rightRatio }">右侧内容</div>
</div>
<button @click="adjustRatio">调整比例</button>
</template>
<script>
export default {
data() {
return {
leftRatio: 1,
rightRatio: 1
};
},
methods: {
adjustRatio() {
this.leftRatio = 2;
this.rightRatio = 1;
}
}
};
</script>
<style>
.split-screen {
display: flex;
height: 100vh;
}
.left-pane, .right-pane {
transition: flex 0.3s ease;
}
</style>使用第三方库
如果需要更复杂的分屏功能（如拖动调整大小），可以使用第三方库如 split.js。
安装 split.js：
npm install split.js在 Vue 中使用：
<template>
<div class="split-screen">
<div id="left-pane">左侧内容</div>
<div id="right-pane">右侧内容</div>
</div>
</template>
<script>
import Split from 'split.js';
export default {
mounted() {
Split(['#left-pane', '#right-pane'], {
sizes: [50, 50],
minSize: 100,
gutterSize: 8,
});
}
};
</script>
<style>
.split-screen {
display: flex;
height: 100vh;
}
#left-pane, #right-pane {
overflow: auto;
}
.gutter {
background-color: #ddd;
}
</style>垂直分屏
将布局方向改为垂直分屏，只需调整 Flexbox 或 Grid 的方向。
<template>
<div class="split-screen">
<div class="top-pane">顶部内容</div>
<div class="bottom-pane">底部内容</div>
</div>
</template>
<style>
.split-screen {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-pane {
flex: 1;
background: #f0f0f0;
}
.bottom-pane {
flex: 1;
background: #e0e0e0;
}
</style>
