可拖拽分隔面板-- vue-splitpane_vue-split-pane

一、安装（能兼容到ie10+； 使用 vue2.0 构建的split - pane组件，可用于创建可拖动的水平和垂直拆分布局，它是垂直水平分割窗口的一个插件）

npm install vue-splitpane

1
2

二、在main.js中引用

import SplitPane from 'vue-splitpane'
Vue.component('SplitPane', SplitPane) // 初始化为vue模板
1
2

三、使用

<SplitPane
 :min-percent="0"
 :max-percent="50"
 :default-percent="leftVisible ? curSplitPaneLeftWidth : 0"
 split="vertical"
 @resize="onSplitPaneResize"
>
 <template slot="paneL">
   <div
     class="mmc-left-box relative"
     :class="leftVisible ? 'show-fmc-left-visible-btn' : 'hide-fmc-left-hidden-btn'"
   >
     <aside class="mmc-left">
       <slot name="mainTree"></slot>
     </aside>
   </div>
 </template>
 <template slot="paneR">
   <main class="mmc-right">
     <slot name="mainForm"></slot>
   </main>
 </template>
</SplitPane>
onSplitPaneResize(leftWidth) {
  console.log('----- leftVisible ------')
  // curSplitPaneLeftWidth 默认20
  if (leftWidth > 1) {
   this.curSplitPaneLeftWidth = leftWidth
    this.leftVisible = true
  } else {
    this.leftVisible = false
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

四、说明

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

slot="paneL" // 左侧插槽
slot="paneR" // 右侧插槽
1
2
3
4
5
6
7

五、效果图