容器

更新时间:2025-01-09 09:53:33

简介

容器类似于 HTML 中的 DIV,用于定义文档中的一个块级容器,如果需要实现一些特定布局,或者对某个区块实现特定样式,或者需要对多个元素分组以便于统一处理,可以使用该组件。

image

配置项

分类

配置

示例

说明

分类

配置

示例

说明

布局

模式

image

布局模式,包括网格和弹性

交互

隐藏

image

隐藏,详情参见通用属性

加载

image

显示加载动画

样式

高度

image

高度,详情参加通用属性

内边距

image

内边距,详情参见通用属性

外边距

image

外边距,详情参见通用属性

CSS样式

溢出

image

设置溢出时所需的行为,对应 CSS 属性:overflow,查看 mdn 详细说明

背景

image

设置各种背景属性,包括 color, image, origin 与 size, repeat 方式等,对应 CSS 属性:background,查看 mdn 详细说明

背景图片

image

设置一个或者多个背景图像,对应 CSS 属性:background-image,查看 mdn 详细说明

背景色

image

设置背景色,对应 CSS 属性:background-color,查看 mdn 详细说明

阴影

image

设置阴影效果,对应 CSS 属性:box-shadow,查看 mdn 详细说明

圆角

image

设置外边框圆角,对应 CSS 属性:border-radius,查看 mdn 详细说明

边框

image

设置边框属性,对应 CSS 属性:border, 查看 mdn 详细说明

上边框

image

设置上边框属性,对应 CSS 属性:border-top, 查看 mdn 详细说明

下边框

image

设置下边框属性,对应 CSS 属性:border-bottom, 查看 mdn 详细说明

左边框

image

设置左边框属性,对应 CSS 属性:border-left, 查看 mdn 详细说明

右边框

image

设置右边框属性,对应 CSS 属性:border-right, 查看 mdn 详细说明

属性与方法

名称

类型

示例

说明

名称

类型

示例

说明

isHover

boolean

container.isHover

鼠标是否在组件内部

loading

boolean

container.loading

组件是否正在加载

setLoading

func

container.setLoading()

设置组件加载状态

clearLoading

func

container.clearLoading()

清除组件 loading 数据

事件回调

配置

说明

配置

说明

image

点击组件后触发的事件

image

鼠标移入组件后触发的事件

image

鼠标移出组件后触发的事件

  • 本页导读
  • 简介
  • 配置项
  • 属性与方法
  • 事件回调