可拖拽分隔面板（vue-splitpane）

使用 vue-splitpane 组件可实现垂直或者水平的面板分隔

1、安装

npm install vue-splitpane
1

2、引入（在需要引入 vue-splitpane 的模块文件中进行引入）

import splitPane from 'vue-splitpane'
export default {
    componnets: { splitPane }
}
1
2
3
4

3、使用

<!-- 简单使用 -->
<split-pane @resize="resize" :min-percent="10" :default-percent="30" split="vertical">
    <template slot="paneL">left content</template>
    <template slot="paneR">right content</template>
</split-pane>

<!-- 嵌套使用 -->
<split-pane @resize="resize" :min-percent="10" :default-percent="30" split="vertical">
    <template slot="paneL">left content</template>
    <template slot="paneR">
        <split-pane @resize="resize" :min-percent="10" :default-percent="30" split="horizontal">
            <template slot="paneL">top content</template>
            <template slot="paneR">bottom content</template>
        </split-pane>
    </template>
</split-pane>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、Props & Function

split: String  拆分类型（垂直拆分：vertical; 水平查分：horizontal）
min-percent: Number  paneL 的最小占比
max-percent: Number  paneL 的最大占比
resize: Function 事件
1
2
3
4