布局组件

文档版本：1.2.0

组件名：BhtLayout

描述

布局编辑组件，用于维护页面画布、组件拖拽、定位和保存。

效果

暂无缩略图。

示例

<bht-layout></bht-layout>

代码

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

或

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

参数

该组件未声明外部 props。

组件配置项

暂无配置项。

画布配置

布局编辑器内部维护 BhtCanvasConfig，用于控制画布设备、尺寸和样式。

key	名称	类型	默认值	说明
canvasDevice	布局设备	select	pc	pc、tablet、mobile
canvasMode	画布模式	select	fluid	fluid、fixed
canvasComponentSizing	组件尺寸策略	select	responsive	responsive、fixed
canvasAlign	画布对齐	select	center	left、center、right
canvasPcWidth	PC 宽度	string	100vw	例如 100vw、1440px
canvasPcHeight	PC 高度	string	100vh	例如 100vh、900px
canvasTabletWidth	平板宽度	string	768px	例如 768px
canvasTabletHeight	平板高度	string	1024px	例如 1024px
canvasMobileWidth	手机宽度	string	390px	例如 390px
canvasMobileHeight	手机高度	string	844px	例如 844px
canvasFixedComponentWidth	固定组件宽度	string	320px	组件尺寸为固定时的默认宽度
canvasFixedComponentAlign	固定组件对齐	select	center	left、center、right
canvasStageBackgroundColor	工作区背景色	color	#f3f6fb	请选择工作区背景色
canvasBackgroundColor	画布背景色	color	#ffffff	请选择画布背景色
canvasBorderColor	画布边框色	color	#d7dee8	请选择画布边框色
canvasBorderWidth	画布边框宽度	string	0	例如 0、1px
canvasBorderStyle	画布边框样式	select	solid	solid、dashed、none
canvasBorderRadius	画布圆角	string	0	例如 0、12px
canvasPadding	画布内边距	string	0	例如 0、24px
canvasStagePadding	工作区内边距	string	0	例如 0、32px
canvasMinHeight	画布最小高度	string	720px	兼容旧配置，例如 720px、100vh
canvasBoxShadow	画布阴影	string	none	例如 none、0 24px 54px rgba(...)
canvasOverflow	画布溢出	select	visible	visible、hidden、auto
canvasCustomStyle	自定义样式	string	-	例如 background-image: linear-gradient(...);

引入

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