🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## **什么是自由容器** ~~~ 1、放置一个空白容器框 2、里面可以放置文字、图片、图标、按钮、热区等元素 3、元素之间有层级关系,可以层叠放置 4、通过设置元素的样式属性,可以实现多种效果 ~~~ ![](https://img.kancloud.cn/ab/cf/abcffec37da84a61c50d0457f8a2d588_1122x784.png) ## **元素内容** 自由容器中的每个元素,均有不同的内容设置属性,在内容设置中,可以设置元素内容 ~~~ 1、文字 ~~~ ![](https://img.kancloud.cn/64/94/6494b4564b54037ef0d747fc7cb0e27d_1254x855.png) > 内容设置方法: > a. 在1处,点击文字元素 > b. 在页面右侧会弹出内容设置项 > c. 在2处,可设置文字的触发事件 > d. 在3处,可以编辑文字的内容,内容可以为空 > e. 在样式设置选项卡中,可以设置此元素的样式 ~~~ 2、图片 ~~~ ![](https://img.kancloud.cn/bc/9a/bc9a80c0a81633b88ef72e4f38e2426d_1257x673.png) > 内容设置方法: > a. 在1处,点击图片元素 > b. 在页面右侧会弹出内容设置项 > c. 在2处,可设置图片的触发事件 > d. 在样式设置选项卡中,背景图片上传图片,设置其他样式属性 ~~~ 3、图标 ~~~ ![](https://img.kancloud.cn/50/bc/50bc89167d4bd314a2b263592cc9f791_1233x632.png) > 内容设置方法: > a. 在1处,点击图标元素 > b. 在页面右侧会弹出内容设置项 > c. 在2处,可上传自定义图片作为图标 > d. 在3处,可选择系统内置的图标 > e. 在4处,可调整图标显示的大小 > f. 在5处,可设置图标的触发事件 > g. 在样式设置选项卡中,可以设置此元素的样式 ~~~ 4、按钮 ~~~ ![](https://img.kancloud.cn/5a/54/5a54cc1911beacdb55fdbbe52593b387_1250x659.png) > 内容设置方法: > a. 在1处,点击按钮元素 > b. 在页面右侧会弹出内容设置项 > c. 在2处,可设置按钮的触发事件 > d. 在3处,可以编辑按钮文字 > e. 在4处,样式选项卡中,背景色属性可以修改按钮背景色 ~~~ 5、热区 ~~~ ![](https://img.kancloud.cn/30/c9/30c9a5a79d563a02569ba4ba30633b6e_1243x660.png) > 内容设置方法: > a. 在1处,点击热区元素 > b. 在页面右侧会弹出内容设置项 > c. 在2处,可设置热区的触发事件 > d. 在样式设置选项卡中,可以设置此元素的样式 > 热区一般配合背景图片使用,放在图片的某一位置,实现点击触发事件