SpAsideMain 左右结构布局

这是一个左右结构的布局组件，支持为 aside 设置宽度，main 的宽度为 100% - asideWidth。

基础用法

<SpAsideMain>
  <template #aside>
    aside
  </template>
  <template #main>
    main
  </template>
</SpAsideMain>

使用间距

<SpAsideMain space="default" pt="12px">
  <template #aside>
    aside
  </template>
  <template #main>
    main
  </template>
</SpAsideMain>

在抽屉中使用

在使用 footer 的 el-drawer 中使用需要进行一些特殊的设置，由于 el-drawer 内容组件默认是有内边距的，如果使用了 sp-aside-main 并且要显示分割线样式会有问题， 所以要使用 el-drawer__body-py-0 去除上下边距。

<ElDrawer v-model="openDrawer" size="85%" :append-to-body="true" title="请选择xxx" class="el-drawer__body-py-0">
  <template #default>
    <SpAsideMain space="default" pt="12px">
      <template #aside>
        aside
      </template>
      <template #main>
        main
      </template>
    </SpAsideMain>
  </template>
  <template #footer>
    <div style="flex: auto">
      <ElButton @click="cancelHandler">{{ $t('btn.cancel') }}</ElButton>
      <ElButton type="primary" @click="confirmHandler">{{ $t('btn.confirm') }}</ElButton>
    </div>
  </template>
</ElDrawer>

API

属性

属性名	类型	默认值	说明
asideWidth	string	'260px'	侧边栏宽度
divider	boolean	true	是否显示分割线
space	'default' | 'small' | 'large' | ''	-	aside 与 main 的间距大小
pt	string	-	上边距

插槽

插槽名	说明
aside	左侧内容
main	右侧内容