布局容器

文档版本：1.1.0

组件名：BhtLayoutContainer

描述

布局容器组件，用于按行列划分区域并承载其他组件。

效果

示例

<bht-layout-container></bht-layout-container>

代码

<bht-layout-container :ref="item.id" :item="item"></bht-layout-container>

或

<BhtLayoutContainer :ref="item.id" :item="item"></BhtLayoutContainer>

参数

参数	类型	必填	默认值	说明
item	Object	否	-	组件配置信息。
configOnly	Boolean	否	false	-

组件配置项

key	名称	类型	默认值	说明
rows	行数	string	2	请输入行数
columns	列数	string	2	请输入列数
gap	间距	string	12px	例如 12px
columnWidths	列宽	string	-	逗号分隔，例如 1fr, 320px, 25%
rowHeights	行高	string	-	逗号分隔，例如 auto, 240px, 30vh
margin	外边距	string	0	例如 0、16px、12px 0
padding	内边距	string	16px	例如 16px
minHeight	最小高度	string	160px	例如 160px
height	固定高度	string	-	可选，例如 480px
cellMinHeight	单元最小高度	string	120px	例如 120px
cellPadding	单元内边距	string	10px	例如 10px
backgroundColor	背景颜色	color	#ffffff	请选择背景颜色
borderColor	边框颜色	color	#e5e7eb	请选择边框颜色
borderWidth	边框宽度	string	1px	例如 1px
borderStyle	边框样式	string	solid	请选择边框样式
cellBackgroundColor	单元背景色	color	#f8fafc	请选择单元背景色
cellBorderColor	单元边框色	color	#cbd5e1	请选择单元边框色
cellBorderStyle	单元边框	string	dashed	请选择单元边框
cellBorderRadius	单元圆角	string	6px	例如 6px
alignItems	垂直对齐	string	stretch	请选择垂直对齐
justifyItems	水平对齐	string	stretch	请选择水平对齐
cellOverflow	内容溢出	string	visible	请选择内容溢出
borderRadius	圆角	string	8px	例如 8px
boxShadow	阴影	string	none	例如 0 12px 24px rgba(15,23,42,.08)
opacity	透明度	string	1	0 到 1，例如 0.95
boxSizing	盒模型	string	border-box	请选择盒模型
customStyle	自定义样式	string	-	例如 box-shadow: none;
cellCustomStyle	单元自定义样式	string	-	例如 place-items: center;

通用布局配置

key	名称	类型	默认值	说明
componentWidth	组件宽度	string	100%	支持 100%、320px、50vw
componentHeight	组件高度	string	-	可选，例如 360px、50vh
componentPositionMode	布局模式	select	flow	flow、absolute、fixed
componentPositionX	X 位置	string	-	自由/固定模式，例如 120px
componentPositionY	Y 位置	string	-	自由/固定模式，例如 80px
componentZIndex	层级	string	-	例如 10
componentHorizontalAlign	水平对齐	select	center	left、center、right、stretch
componentVerticalAlign	垂直对齐	select	top	top、middle、bottom、stretch
componentLocked	锁定位置	select	false	true、false
componentRelativeTo	参照组件 ID	select	-	可选择其他已有组件的 id 和名称
componentRelativePlacement	相对位置	select	-	right、left、bottom、top
componentRelativeGap	相对间距	string	12px	例如 12px

通用样式配置

key	名称	类型	默认值	说明
componentMargin	外边距	string	-	例如 16px 或 12px 24px
componentPadding	内边距	string	-	例如 16px 或 12px 24px
componentMinWidth	最小宽度	string	-	例如 240px
componentMaxWidth	最大宽度	string	-	例如 1200px 或 none
componentMinHeight	最小高度	string	-	例如 120px
componentMaxHeight	最大高度	string	-	例如 720px 或 none
componentBackgroundColor	背景颜色	color	-	例如 #ffffff 或 rgba(255,255,255,.9)
componentBackgroundImage	背景图片	string	-	例如 url(https://...) 或 linear-gradient(...)
componentBackgroundSize	背景尺寸	string	-	例如 cover、contain、100% 100%
componentBackgroundPosition	背景位置	string	-	例如 center、left top
componentBackgroundRepeat	背景重复	select	-	no-repeat、repeat、repeat-x、repeat-y
componentBorderColor	边框颜色	color	-	请选择边框颜色
componentBorderWidth	边框宽度	string	-	例如 1px 或 1px 0 0
componentBorderStyle	边框样式	select	-	solid、dashed、dotted、none
componentBorderRadius	圆角	string	-	例如 8px 或 12px 12px 0 0
componentBoxShadow	阴影	string	-	例如 0 12px 32px rgba(15,23,42,.12)
componentOpacity	透明度	string	-	0 到 1，例如 .95
componentOverflow	溢出处理	select	-	visible、hidden、auto、clip
componentTextAlign	文本对齐	select	-	left、center、right、justify
componentColor	文字颜色	color	-	请选择文字颜色
componentBoxSizing	盒模型	select	border-box	border-box、content-box
componentFilter	滤镜	string	-	例如 blur(2px)、grayscale(1)
componentBackdropFilter	背景滤镜	string	-	例如 blur(12px)
componentCustomStyle	自定义 CSS	textarea	-	例如 transform: translateY(8px);

引入

import { BhtLayoutContainer } from '@behappyto/cms-ui-vue3'