elementi ui split面板分割

Element UI是一个流行的Vue.js组件库，它提供了一个名为"split-pane"的Split Panel组件，用于创建可以拆分、拖动大小的两部分视图，类似于浏览器窗口的分拆功能。这个组件允许开发者轻松地创建具有动态布局的应用界面，比如工作区、侧边栏和主要内容区域。

在Element UI中，你可以通过以下步骤使用Split Pane：

1. 首先，安装Element UI及其依赖，如果还没有安装，可以在项目中运行`npm install element-ui --save`。
2. 引入Split Pane组件和样式：在需要的地方导入`<el-splitpane>`标签，并包含Element CSS样式。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

3. 在模板中使用Split Pane组件，设置其属性如`resizable`（是否允许拖动调整大小）、`size`（初始大小）等。

<template>
  <div>
    <el-splitpane :resizable="true" :size="splitSize" v-model="activePane">
      <el-pane>左侧内容</el-pane>
      <el-pane>右侧内容</el-pane>
    </el-splitpane>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePane: 'left', // 或者 'right'
      splitSize: '40%', // 初始大小比例
    };
  },
};
</script>

4. 根据需要，你可以监听`change`事件来处理大小变化或切换内容区域。

<template>
...
<el-splitpane
  ...
  @change="handleSplitChange"
/>
...
</template>

<script>
methods: {
  handleSplitChange(value) {
    console.log('分割区域已更改到:', value);
    this.activePane = value === 'left' ? 'left' : 'right';
  }
}
</script>