UI组件库--布局组件

1.注册配置

参考UI组件库的注册配置

2.页面调用

1. 页面js中添加引用

import { BdLayout4 } from '@bdsoft/element'

2. template 中直接写html标签即可,下面内容具体参考3.布局示例 相关代码

<BdLayout4>
    <!--这里使用插槽的写法进行布局的使用-->
    <template #header>
        11111
    </template>
    <template>
        11111
    </template>
</BdLayout4>

3.布局示例

注意：

注意每个组件中插槽的使用不同。

左右布局

3.1带标题 BdLayout1

import { BdLayout1 } from '@bdsoft/element'
<BdLayout1>
    <template #left>
        头部区域
    </template>
    右侧内容区域
</BdLayout1>

3.2标题+菜单 BdLayout2

import { BdLayout2 } from '@bdsoft/element'
<BdLayout2>
    <template #left>
        头部区域
    </template>
    右侧内容区域
</BdLayout2>

上下布局

3.3上-左右 BdLayout3

import { BdLayout3 } from '@bdsoft/element'
<BdLayout3>
    <template #header>
        头部区域
    </template>
      <template #left>
        左侧区域
    </template>
    右侧内容区域
</BdLayout3>

3.4上-下 BdLayout4

import { BdLayout4 } from '@bdsoft/element'
<BdLayout4>
    <template #header>
        头部区域
    </template>
    右侧内容区域
</BdLayout4>

WARNING

注意：下面的方法多配合复杂逻辑进行处理,这里暂没有进行过多说明,后续慢慢完善