1. 安装及引入
npm install vue-splitpane • 1
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 lang="stylus" scoped> .wrap{ height:300px; .paneL{ background-color:red; height:100%; width:100%; } .paneR{ background-color: pink; height:100%; width:100%; } } </style>
效果：
分割成三列：
<split-pane @resize="resize" :min-percent='20' :default-percent='30' split="vertical"> <template slot="paneL"> A </template> <template slot="paneR"> <split-pane split="horizontal"> <template slot="paneL"> B </template> <template slot="paneR"> C </template> </split-pane> </template> </split-pane>
