Vue-SplitPane可拖拽分隔面板（随意拖动div）

npm install vue-splitpane

一、使用

（1）局部使用：

在vue文件中

import splitPane from 'vue-splitpane'
export default {
    componnets: { splitPane }
}

（2）全局使用：

在main.js文件注册

import splitPane from 'vue-splitpane'
// 注册为全局组件
Vue.component('split-pane', splitPane);

二、使用局部在vue文件中使用例子

先分割成左右（注意只能两个两个分割，自由选择竖直还是水平分割）

重点是：

html：代码

data代码：

defaultPercent1:
        sessionStorage.getItem("defaultPercent1") == null
          ? 50
          : parseFloat(sessionStorage.getItem("defaultPercent1")),
      defaultPercent2:
        sessionStorage.getItem("defaultPercent2") == null
          ? 20
          : parseFloat(sessionStorage.getItem("defaultPercent2")),
      defaultPercent3:
        sessionStorage.getItem("defaultPercent3") == null
          ? 20
          : parseFloat(sessionStorage.getItem("defaultPercent3")),
      defaultPercent4:
        sessionStorage.getItem("defaultPercent4") == null
          ? 25
          : parseFloat(sessionStorage.getItem("defaultPercent4")),

method代码：

所有代码