vue中，页面布局之使用vue-splitpane实现窗格的拆分和调节，类似于flex布局
1、基本介绍
npm地址：https://www.npmjs.com/package/vue-splitpane
安包
npm install vue-splitpane
注册
main.js
import splitPane from 'vue-splitpane'
// 注册为全局组件
Vue.component('split-pane', splitPane);
属性说明
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| split | 分割类型 | String [ horizontal （水平），vertical （垂直） ] | 必选一种 |
| min-percent | 面板最小百分比 | Number | 10 |
| max-percent | 面板最大百分比 | Number | 10 |
2、使用
分割成两列：
效果
代码
<template>
<div class="wrap">
<split-pane
@resize="resize"
:min-percent="20"
:default-percent="30"
split="vertical"
>
<template slot="paneL">
<!-- 编辑自己的代码 -->
<div class="paneL"></div>
</template>
<template slot="paneR">
<!-- 编辑自己的代码 -->
<div class="paneR"></div>
</template>
</split-pane>
</div>
</template>
<script>
export default {
methods: {
resize() {},
},
};
</script>
<style scoped>
.wrap {
height: 300px;
}
.paneL {
background-color: red;
height: 100%;
width: 100%;
}
.paneR {
background-color: pink;
height: 100%;
width: 100%;
}
</style>
分割成三列：
效果
代码
<template>
<div class="wrap">
<split-pane
v-on:resize="resize"
:min-percent="20"
:default-percent="30"
split="vertical"
>
<template slot="paneL">
<div class="paneL">A</div>
</template>
<template slot="paneR">
<split-pane split="horizontal">
<template slot="paneL" class="paneK">
<div class="paneK">B</div>
</template>
<template slot="paneR">
<div class="paneR">C</div>
</template>
</split-pane>
</template>
</split-pane>
</div>
</template>
<script>
export default {
methods: {
resize() {},
},
};
</script>
<style scoped>
.wrap {
height: 300px;
}
.paneL {
background-color: red;
height: 100%;
width: 100%;
color: #fff;
font-size: 18px;
}
.paneK {
background-color: blue;
height: 100%;
width: 100%;
color: #fff;
font-size: 18px;
}
.paneR {
background-color: pink;
height: 100%;
width: 100%;
color: #fff;
font-size: 18px;
}
</style>
