Panel
面板布局。
Panel.Item属性
- 属性说明:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
region | string | 否 | default | 默认展示的面板,取值有: top、bottom、left、right、tbar、bbar、lbar、rbar、default |
size | string, number | 否 | 面板的宽度 | |
hidden | boolean | 否 | 面板是否隐藏 | |
split | boolean | 否 | 是否可以通过拖拽来改变面板的宽度 | |
collapsed | boolean | 否 | 默认是否是收起的状态 | |
collapsible | boolean | 否 | 是否允许收起,显示收起按钮 | |
maxSize | number | 否 | 面板的最大宽度 | |
minSize | number | 否 | 面板的最小宽度 | |
drawer | boolean | 否 | 抽屉模式 | |
autoSize | boolean | 否 | 自动计算尺寸 |
使用方法
代码示例:
import { Panel } from '@jecloud/ui'; export default { components: { Panel, PanelItem: Panel.Item, }, setup() { const panel = ref(); const options = reactive({ top: { size: 50, minSize: 20, split: true, hidden: false, collapsible: true }, bottom: { size: 50, split: true, class: 'custom-bottom', collapsible: true }, default: { minSize: 1200, size: 1200, collapsed: true }, left: { size: 200, split: true, drawer: true, // 抽屉收起效果 collapsible: true, // 显示收起展开按钮 collapsed: true, minSize: 100, maxSize: 300, }, right: { size: 200, split: true, collapsible: true }, tbar: { size: 40 }, bbar: { hidden: true }, lbar: { class: 'custom-tbar' }, rbar: { style: { backgroundColor: '#ddd' } }, }); const setConfig = (pos, attr) => { switch (attr) { case 'collapsed': options[pos].collapsed = !options[pos].collapsed; break; case 'hidden': panel.value.setVisible(pos, options[pos].hidden); console.log(options); break; case 'size': options[pos].size = 100; break; } }; return { panel, options,setConfig }; }, }; // 在vue的template标签中 <Panel ref="panel"> <PanelItem region="top" v-bind="options.top">top</PanelItem> <PanelItem region="bottom" v-bind="options.bottom">bottom</PanelItem> <PanelItem region="left" v-bind="options.left" style="background-color: #87e8de"> 抽屉面板<br /> <Button @click="setConfig('left', 'collapsed')">PIN</Button> </PanelItem> <PanelItem region="right" v-bind="options.right">right</PanelItem> <PanelItem region="tbar" v-bind="options.tbar">tbar</PanelItem> <PanelItem region="bbar" v-bind="options.bbar">bbar</PanelItem> <PanelItem region="lbar" v-bind="options.lbar">lbar</PanelItem> <PanelItem region="rbar" v-bind="options.rbar">rbar</PanelItem> <PanelItem region="default" v-bind="options.default"> <div> <Button @click="setConfig('top', 'collapsed')">展开收起TOP</Button> <Button @click="setConfig('top', 'hidden')">显隐TOP</Button> <Button @click="setConfig('top', 'size')">调整TOP尺寸:100px</Button> <Button @click="setConfig('left', 'collapsed')">展开收起LEFT</Button> </div> </PanelItem> </Panel>
最后编辑: 秦永莲 文档更新时间: 2024-07-26 14:15 作者:秦永莲