vue-splitpane使用方法

使用vue-splitpane非常简单，只需要按照以下步骤即可：

1. 安装vue-splitpane组件：使用npm或者yarn命令进行安装，例如：

   npm install vue-splitpane

2. 在Vue.js应用中引入vue-splitpane组件：在main.js中添加以下代码：

   import Vue from 'vue'
   import SplitPane from 'vue-splitpane'
   
   Vue.component('SplitPane', SplitPane)

3. 在Vue.js组件中使用vue-splitpane：在template中添加以下代码：

   <split-pane :min-width="100" :max-width="500">
     <div>左边的区域</div>
     <div>右边的区域</div>
   </split-pane>

4. 配置vue-splitpane属性：可以根据需要设置一些属性，例如最小宽度、最大宽度、分割条的位置等。具体属性如下：

- `min-width`：左边区域的最小宽度（或者上边区域的最小高度）；
- `max-width`：左边区域的最大宽度（或者上边区域的最大高度）；
- `splitter-width`：分割条的宽度（或者高度），默认为10px；
- `splitter-position`：分割条的位置，可以是一个百分比（例如"50%"）或者一个像素值（例如"100px"），默认为"50%"；
- `splitter-class`：分割条的CSS类名，用于自定义样式；
- `direction`：分割条的方向，可以是"horizontal"（水平方向）或者"vertical"（垂直方向），默认为"horizontal"。

通过以上步骤，就可以在Vue.js应用中使用vue-splitpane组件了。