el-split分割面板

`el-split` 是 Element Plus（Element UI 的增强版本）库中的一个组件，它提供了一种创建可拖动的分割面板的功能。这种组件通常用于布局管理，比如在网页上创建可以调整大小的两部分区域，如左右侧边栏、主内容区等。用户可以通过鼠标或触摸操作来调整各个面板的宽度，使得界面可以根据不同的需求动态变化。

`el-split` 具有易于使用的 API 和响应式的特性，支持多种方向（水平或垂直）的分隔，并提供了事件监听，以便在尺寸变化时处理业务逻辑。要使用这个组件，你需要先安装 Element Plus 并在其模板中引入 `el-split` 标签。

例如：

<template>
  <div class="app-container">
    <el-split :direction="orientation" :resizeable="true" @split-change="onSplitChange">
      <el-split-pane v-for="pane in panes" :size="pane.size" :mini="pane.mini">
        <div>{{ pane.content }}</div>
      </el-split-pane>
    </el-split>
  </div>
</template>

<script>
import { ElSplit, ElSplitPane } from 'element-plus';

export default {
  components: {
    ElSplit,
    ElSplitPane,
  },
  data() {
    return {
      orientation: 'horizontal', // 分割方向，默认为水平
      panes: [
        { size: '50%', content: '左侧面板' },
        { size: '50%', content: '右侧面板' },
      ],
    };
  },
  methods: {
    onSplitChangeSizes(newSizes) {
      console.log('分割后的尺寸:', newSize);
    },
  },
};
</script>