一、左右多分栏
<!--
* @Author: your name
* @Date: 2021-07-31 15:38:29
* @LastEditTime: 2021-07-31 16:48:27
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \internetPlatform\src\views\zhangming\systemManage\test3.vue
-->
<template>
<div id="frame">
<SplitGrid class="sb_split-grid" direction="row">
<SplitGrid class="sb_sub-grid">
<SplitGridArea>Column 1</SplitGridArea>
<SplitGridGutter />
<SplitGridArea>Column 2</SplitGridArea>
<SplitGridGutter />
<SplitGridArea>Column 3</SplitGridArea>
</SplitGrid>
</SplitGrid>
</div>
</template>
<script>
import { SplitGrid, SplitGridArea, SplitGridGutter } from 'vue-split-grid'
export default {
components: {
SplitGrid,
SplitGridArea,
SplitGridGutter,
},
}
</script>
<style lang="scss" scoped>
body {
margin: 0;
}
#frame {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 80vh;
overflow: hidden;
}
.sb_split-grid {
height: 100%;
}
</style>
二、上下多分栏
<template>
<div>
<div id="tem">
<SplitGrid class="sb_split-grid" direction="row">
<SplitGridArea size-unit="%" :size-value="30"><test1></test1></SplitGridArea>
<SplitGridGutter style="z-index:999"/>
<SplitGridArea size-unit="%" :size-value="69"><test2></test2></SplitGridArea>
</SplitGrid>
</div>
</div>
</template>
<script>
import { SplitGrid, SplitGridArea, SplitGridGutter } from 'vue-split-grid';
import test1 from '@/views/SBS/yidingTest/test1.vue'
import test2 from '@/views/SBS/yidingTest/test2.vue'
export default {
components: {
SplitGrid,
SplitGridArea,
SplitGridGutter,
test1,
test2
}
}
</script>
<style lang="scss" scoped>
body {
margin: 0;
}
#tem {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
//text-align: center;
color: #2c3e50;
height: 100vh;
overflow: hidden;
}
.sb_split-grid {
height: 100%;
}
</style>
3、混合
<template>
<div id="split">
<SplitGrid class="sb_split-grid" direction="row">
<SplitGrid size-unit="%" :size-value="25">
<SplitGridArea>上左1</SplitGridArea>
<SplitGridGutter />
<SplitGridArea>上左2</SplitGridArea>
<SplitGridGutter />
<SplitGridArea>上左3</SplitGridArea>
</SplitGrid>
<SplitGridGutter />
<SplitGrid size-unit="%" :size-value="25">
<SplitGridArea>中左1</SplitGridArea>
<SplitGridGutter />
<SplitGridArea>中左2</SplitGridArea>
<SplitGridGutter />
<SplitGridArea>中左3</SplitGridArea>
</SplitGrid>
<SplitGridGutter />
<SplitGrid size-unit="%" :size-value="44">
<SplitGridArea>下左1</SplitGridArea>
<SplitGridGutter />
<SplitGridArea>下左2</SplitGridArea>
<SplitGridGutter />
<SplitGridArea>下左3</SplitGridArea>
</SplitGrid>
</SplitGrid>
</div>
</template>
<script>
import { SplitGrid, SplitGridArea, SplitGridGutter } from 'vue-split-grid'
export default {
components: {
SplitGrid,
SplitGridArea,
SplitGridGutter,
},
}
</script>
<style lang="scss" scoped>
#split {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100vh;
overflow: hidden;
}
.sb_split-grid {
height: 100%;
}
.sb_sub-grid1 {
height: 30%;
}
</style>
方式二:
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
<splitpanes class="default-theme" style="width:100%;" :push-other-panes="false">
<pane size="27"><enterpriseSonComponent></enterpriseSonComponent></pane>
<pane size="27"><factorySonComponent></factorySonComponent></pane>
<pane size="46"><productLineSonComponent></productLineSonComponent></pane>
</splitpanes>
官网地址:
https://antoniandre.github.io/splitpanes/