Panel

Panel

面板布局。

Panel.Item属性

• 属性说明：

使用方法

• 代码示例：

  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>