vue-splitpane配置详解

Vue-splitpane 是一个基于 Vue.js 的分割面板组件，可以方便地创建可调整大小的面板。以下是 Vue-splitpane 的配置详解：

1. 安装

npm install vue-splitpane --save

2. 引入组件
在需要使用分割面板的组件中引入 vue-splitpane 组件：

import Splitpane from 'vue-splitpane'

3. 使用组件
在模板中使用 Splitpane 组件，并传递必要的属性：

<splitpane :default-size="50">
  <div>左侧内容</div>
  <div>右侧内容</div>
</splitpane>

其中，default-size 属性表示左侧面板的默认大小，可以是一个数字（表示像素）或一个百分比值。传递给 Splitpane 组件的子元素将成为左右两个面板的内容。可以为左右两个面板设置样式，例如：

<splitpane :default-size="50">
  <div style="background-color: blue; height: 100%;">左侧内容</div>
  <div style="background-color: red; height: 100%;">右侧内容</div>
</splitpane>

4. 设置属性
除了 default-size 属性外，还可以设置其他属性来自定义分割面板的行为和样式，例如：

<splitpane 
  :default-size="50"
  :min-size="30"
  :max-size="70"
  :splitter-size="10"
  :splitter-color="'#ccc'"
  :splitter-class="'splitter-class'"
  :direction="'vertical'"
  :cursor="'ew-resize'"
>
  <div style="background-color: blue; height: 100%;">左侧内容</div>
  <div style="background-color: red; height: 100%;">右侧内容</div>
</splitpane>

其中，各属性的含义如下：
- default-size: 左侧面板的默认大小，可以是数字或百分比值，默认为 50。
- min-size: 左侧面板的最小大小，可以是数字或百分比值，默认为 0。
- max-size: 左侧面板的最大大小，可以是数字或百分比值，默认为 100。
- splitter-size: 分隔条的大小，可以是数字或像素值，默认为 10。
- splitter-color: 分隔条的颜色，可以是十六进制值或颜色名称，默认为 #ccc。
- splitter-class: 分隔条的类名，可以用于自定义样式。
- direction: 分割方向，可以是 horizontal 或 vertical，默认为 horizontal。
- cursor: 鼠标悬停在分隔条上时的光标样式，可以是 CSS 光标值，默认为 ew-resize。

5. 事件
Vue-splitpane 还支持一些事件，例如：

<splitpane 
  :default-size="50"
  @before-resize="handleBeforeResize"
  @resize="handleResize"
>
  <div style="background-color: blue; height: 100%;">左侧内容</div>
  <div style="background-color: red; height: 100%;">右侧内容</div>
</splitpane>

其中，before-resize 事件在调整大小之前触发，可以用来阻止调整大小。resize 事件在调整大小后触发，可以用来获取新的大小值。

以上是 Vue-splitpane 的配置详解，通过设置属性和事件，可以创建自定义的分割面板。