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

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

npm install vue-splitpane

二、在main.js中引用

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

三、使用

 
 

onSplitPaneResize(leftWidth) {
  console.log('----- leftVisible ------')
  // curSplitPaneLeftWidth 默认20
  if (leftWidth > 1) {
   this.curSplitPaneLeftWidth = leftWidth
    this.leftVisible = true
  } else {
    this.leftVisible = false
  }
}

四、说明

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

slot="paneL" // 左侧插槽
slot="paneR" // 右侧插槽

五、效果图