Layout 布局

💡 组件名：my-layout

布局组件，全局组件，无需额外动态导入组件

需要表格满屏时使用，满屏标签需要添加class="my-fill"

MyLayout 基本使用

<my-layout>
  <el-card class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
    ...
  </el-card>
  <el-card class="my-fill mt8" shadow="never">
    ...
  </el-card>
</my-layout>

💡 组件名：my-split-panes

窗格拆分组件，需要界面拆分布局时使用

局部导入

import { defineAsyncComponent } from 'vue'

const MySplitPanes = defineAsyncComponent(() => import('/@/components/my-layout/split-panes.vue'))

MySplitPanes 基本使用

左右布局

<MySplitPanes>
  <pane size="50" min-size="30" max-size="70">
  </pane>
  <pane>
  </pane>
</MySplitPanes>

MySplitPanes Props

参数	说明	类型	默认值	可选值
horizontal	水平排列反之垂直排列	Boolean	false	-
push-other-panes	其他窗格将被相应地推开	Boolean	true	-
dbl-click-splitter	双击分隔条将会使相邻的窗格最大化或恢复原始大小	Boolean	true	-
rtl	布局将从右到左排列	Boolean	false	-
first-splitter	第一个分隔条将被激活，允许从一开始就调整窗格的大小	Boolean	false	-

MySplitPanes Events

事件名	说明	返回参数
ready	当MySplitPanes准备就绪时触发
resize	调整大小	所有窗格对象及其尺寸的数组
resized	拖动结束	所有窗格对象及其尺寸的数组
pane-click	点击窗格	被点击的窗格对象及其尺寸
pane-maximize	窗格最大化	最大化的窗格对象及其尺寸
pane-add	添加窗格	添加的窗格的索引和调整大小后的新窗格数组
pane-remove	移除窗格	被移除的窗格以及剩余的所有窗格对象及其尺寸的数组
splitter-click	点击分隔条	紧邻点击分隔条之后的下一个窗格对象（及其尺寸）

Pane Props

参数	说明	类型	默认值	可选值
size	尺寸	[Number, String]	-	-
minSize	最小尺寸	[Number, String]	0	-
maxSize	最大尺寸	[Number, String]	100	-