何时使用

本组件为内容区域自定义内容用法

注意每个组件里面的插槽名字不允许重复 否则会有错

<template>
  <!-- v-layout 插槽可以随便起名 组件按照从上到下顺序依次显示，
    并且每个插槽高度可以自定义传入高度 10px，10%或10。如果不传为默认高度/宽度 如果给某个插槽添加了 flex那么这个插槽会平分剩余高度/宽度
    layoutBro:并且每个插槽高度可以自定义传入高度/宽度 10px，10%或10。如果不传为默认高度/宽度 如果给某个插槽添加了 flex那么这个插槽会平分剩余高度/宽度
    maxHeight:跟layoutBro写法一样 不能传入flex能传入整数或正常的css样式 10px，10%或10这样， 设置每个插槽的最大高度宽度
    minHeight:跟layoutBro写法一样 不能传入flex能传入整数或正常的css样式 10px，10%或10这样，设置每个插槽的最小高度/宽度
    resizable:跟layoutBro写法一样 只能传入boolean 是否为可拖拽方法
    layout:传入true时当前面板切换为横向面板
     -->
  <v-layout
    :splitter="true"
    height="500px"
    width="100%"
    :layoutBro="{ 自定义插槽: '20%', 自定义插槽1: '20px', 自定义插槽3: 'flex', 自定义插槽4: 20 }"
    :resizable="{
      我是不给高度的插槽: true,
      自定义插槽: true,
      自定义插槽1: true
    }"
  >
    <!--    在v-layout里可以无限写插槽并且取名不做限制按照先后顺序来展示， 不可以在template插槽上直接写判断  -->
    <template #我是不给高度的插槽>
      <div>内容多高我多高就完了</div>
    </template>
    <template #自定义插槽>
      <div style="height: 100%;background: #0b8235">我是高度百分之20%的自定义插槽</div>
    </template>
    <template #自定义插槽1>
      <div style="height: 100%;background: #0d429a">我是高度百分之20px的自定义插槽1</div>
    </template>
    <template #自定义插槽3>
      <div style="height: 100%;background: #2ba471">我是铺满剩余高度的自定义插槽3</div>
    </template>
    <template #自定义插槽4>
      <div style="height: 100%;background: #8eabff">
        我是自定义插槽4传入整数的高度20。会被转换为 20px
      </div>
    </template>
  </v-layout>
</template>
<script setUp lang="ts">
//需要先等待组件加载完毕才可以使用TableRef方法
</script>

默认面板

带拖拽面板

设定:Splitter="true" 可以给所有面板加拖拽

可以单独控制面板是否开启拖拽伸缩

横向面板

设定:layout="true" 可以改为横向

横向面板可拖拽-(暂时无法根据内容自适应宽度，不影响使用)

设定:Splitter="true" 可以给所有面板加拖拽

可以单独控制面板是否开启拖拽伸缩-(暂时无法根据内容自适应宽度，不影响使用)

VLayout 组件参数说明

参数	说明	类型
width	(选填)布局容器的宽度	string (默认: "100%")
height	(选填)布局容器的高度	string (默认: "100%")
splitter	(选填)是否启用分割器功能，允许用户拖拽调整面板大小内容	boolean
layoutBro	(选填)各个插槽的尺寸配置对象，键为插槽名，值为尺寸	Record<string, string
maxHeight	(选填)各个插槽的最大高度限制	Record<string, string
minHeight	(选填)各个插槽的最小高度限制	Record<string, string
resizable	(选填)控制各个插槽是否可调整大小	Record<string, boolean>
layout	(选填)控制各个插槽是否可调整大小	Record<string, boolean>

layoutBro 配置说明(layoutBro 对象的值支持以下类型)

值类型	说明	示例
"flex"	自适应填充剩余空间	sidebar: "flex"
number	固定像素值	header: 60
string	CSS尺寸值（支持px、%、vh等）	footer: "10%"

插槽说明

插槽	说明	类型
动态插槽	根据传入的插槽名称动态渲染内容区域	slot

特色功能

功能	说明	类型
自动尺寸计算	根据传入的插槽名称动态渲染内容区域	功能特性
分割器拖拽	启用splitter时支持拖拽调整面板大小	功能特性
响应式布局	支持水平和垂直两种布局方向	功能特性
尺寸限制	支持设置最大最小高度限制	功能特性