布局容器

介绍

用于组件的分栏及响应式布局

API

Props

参数名	描述	类型	默认值
status	默认状态，组件的状态	'default'|'hide'	'default'
colGap	列间距 ， 布局容器下列组件的列间距	string	-
rowGap	行间距 ， 布局容器下列组件的行间距	string	-
baseStyle	自定义样式 ， 表格整体自定义样式	string	-
customClass	类名绑定	string	-
width	宽 ， 布局容器宽度	string	-
height	高 ， 布局容器高度	string	-
opacity	不透明度 ， 布局容器背景色透明度	string	-
boxStyle	盒模型 ， margin,border,padding设置	BoxStyle	-
boxShadow	阴影	BoxShadow	-
font	文字样式	Font	-
background	背景样式	Background	-
uniqueKey	唯一标识 , 组件的唯一标识	string	-
loop	循环数据 , 循环渲染设置	Loop	-
empty	缺省提示	Empty	-

Props-列

参数	说明	类型	默认值
status	默认状态 , 组件的状态	'default'|'hide'|'destroy'	'default'
col	栅格占位格数 , 设置一：0-24栅格数，表示占据几格；设置二：可设置为固定值例如 100px, 50%等；设置三：可设置为auto表示占据剩余空间	number | string	'8'
responsive	响应式	boolean	-
xs	< 576px 响应式栅格 , 填写栅格数（0-24）	number	-
sm	>= 576px 响应式栅格 , 填写栅格数（0-24）	number	-
md	>= 768px 响应式栅格 , 填写栅格数（0-24）	number	-
lg	>= 992px 响应式栅格 , 填写栅格数（0-24）	number	-
xl	>= 1200px 响应式栅格 , 填写栅格数（0-24）	number	-
xxl	>= 1600px 响应式栅格 , 填写栅格数（0-24）	number	-
baseStyle	自定义样式 , 表格整体自定义样式	string	-
opacity	不透明度 , 布局容器背景色透明度	string	-
display	显示,设置组件的显示布局模式	Display	-
boxStyle	盒模型 ， margin,border,padding设置	BoxStyle	-
boxShadow	阴影	BoxShadow	-
font	文字样式	Font	-
background	背景样式	Background	-
uniqueKey	唯一标识 , 组件的唯一标识	string	-
loop	循环数据 , 循环渲染设置	Loop	-
empty	缺省提示	Empty	-

Events

事件名	描述	参数
onClick	点击列时触发	ctx params:PointerEvent loop:LoopParams

Type

// 盒模型
type BoxStyle = {
  "marigin": [string|string|string|string],
  "border": [string|string|string|string],
  "padding": [string|string|string|string],
}

// 阴影
type BoxShadow = {
  "color":string,
  "hShadow":string,
  "vShadow":string,
  "blur":number,
}

// 文字样式
type Font = {
  "mode": "custom",
  "fontWeight": "100"|"normal"|"500"|"600"|"700"|"900",
  "fontAlign": "left"|"right"|"center"|"justify",
  "fontSize":cnumber,
  "lineHeight":cnumber,
  "color":cstring
}

// 背景样式
type Background = {
  "color": string,
  "size": "cover"|"contain"|"length"
  "width": {
    "unit": "px"|"%",
    "value": number
  }
  "height":{
    "unit": "px"|"%",
    "value": number
  }
}

// 循环
type Loop = {
  "data": any[],
  "paramName": string,
  "indexName": string,
  "key": string
}

// 缺省提示
type Empty = {
  "enable": boolean,
  "icon": string,
  "text": string
}

//样式-显示
type Display = {
  type:"block"|"inline-block"|"inline"|"flex",
  // type选择flex可配置以下属性
  flex:{
    flexDirection:"row"|"column"|"row-reverse"|"column-reverse",
    alignItems:"flex-start"|"center"|"flex-end"|"stretch"|"base-line",
    justifyContent:"flex-start"|"center"|"flex-end"|"space-between"|"space-around"
  }
}

// 循环变量数据参数
type LoopParams = {
  "indexName":string,
  "paramName":string,
  "ref":ComputedRefImpl, // 全部的循环变量数据
  "row":number,
  "rowIndex":number
}[]