Vue EasyUI 面板
面板（ Panel ）可当做其他内容的容器使用。 面板（ Panel ）是创建其他组件（布局（ Layout ）、选项卡（ Tabs ）、折叠面板（ Accoedion ）等）的基础组件。 面板（ Panel ）提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。 面板（ Panel ）可嵌入到网页的任意位置。
属性列表
| 名称 | 数据类型 | 作用描述 | 默认值 |
|---|---|---|---|
| border | boolean | 是否显示边框。 | true |
| title | string | 在面板标题中显示的文本。 | null |
| iconCls | string | 在面板标题上显示16x16图标的CSS类。 | null |
| closed | boolean | 面板是否关闭。 | false |
| collapsed | boolean | 面板是否已折叠。 | false |
| collapsible | boolean | 是否在标题上显示可折叠按钮。 | false |
| showHeader | boolean | 是否显示标题。 | true |
| showFooter | boolean | 是否显示页脚。 | true |
| expandIconCls | string | 展开图标的样式类。 | panel-tool-expand |
| collapseIconCls | string | 折叠图标的样式类。 | panel-tool-collapse |
| panelCls | string | 面板样式类。 | null |
| panelStyle | Object | 面板内联样式。 | null |
| headerCls | string | 面板标题样式类。 | null |
| headerStyle | Object | 面板标题内联样式。 | null |
| bodyCls | string | 面板主体样式类。 | null |
| bodyStyle | Object | 面板主体内联样式。 | null |
| footerCls | string | 面板页脚样式类。 | null |
| footerStyle | Object | 面板页脚内联样式。 | null |
插槽
| 名称 | 参数 | 作用描述 |
|---|---|---|
| header | none | 面板头部域。 |
| footer | none | 面板页脚域。 |
注：
- 继承： None 。
使用方法
通过 HTML 标记创建面板（ Panel ）。
<Panel title="Panel Title" :collapsible="true" :bodyStyle="{padding:'20px'}" style="height:200px">
<p>W3Cschool.cn</p>
</Panel>