Drawer 抽屉

Drawer 的用法与官网完全相同，具体的使用方式可以查看官网。 我们对它仅仅是修改了标题、footer 的样式，可以以更低成本的在我们系统中使用。

通用 class 名

为了更方便的修改 Drawer 的样式，我们提供了以下 class 名，可以直接在 Drawer 的 class 属性中添加。

class 名	作用
el-drawer__body-p-0	去掉 Drawer body 的 padding
el-drawer__body-pt-0	去掉 Drawer body 的 padding-top
el-drawer__body-pb-0	去掉 Drawer body 的 padding-bottom
el-drawer__body-py-0	去掉 Drawer body 的 padding-top 和 padding-bottom
el-drawer__body-bg	为 Drawer body 设置背景色，这个背景色与 body 的相同

基础使用

<ElButton type="primary" style="margin: 10px" @click="drawer = true">
  基础使用
</ElButton>

<ElDrawer v-model="drawer" title="基础使用">
  <template #default>
    <div>
      <ElRadio v-model="radio1" value="Option 1" size="large">Option 1</ElRadio>
      <ElRadio v-model="radio1" value="Option 2" size="large">Option 2</ElRadio>
    </div>
  </template>
  <template #footer>
    <div style="flex: auto">
      <ElButton @click="drawer = false">cancel</ElButton>
      <ElButton type="primary" @click="drawer = false">confirm</ElButton>
    </div>
  </template>
</ElDrawer>

与 SpAsideMain 组合使用

<ElButton type="primary" style="margin: 10px" @click="drawer2 = true">
  与 SpAsideMain 组合使用
</ElButton>

<ElDrawer
  v-model="drawer2"
  size="85%"
  :append-to-body="true"
  class="el-drawer__body-py-0"
  title="与 SpAsideMain 组合使用"
>
  <template #default>
    <SpAsideMain>
      <template #aside>
        aside
      </template>
      <template #main>
        main
      </template>
    </SpAsideMain>
  </template>
  <template #footer>
    <div style="flex: auto">
      <ElButton @click="drawer2 = false">cancel</ElButton>
      <ElButton type="primary" @click="drawer2 = false">confirm</ElButton>
    </div>
  </template>
</ElDrawer>

与 SpSidebar 组合使用

<ElButton type="primary" style="margin: 10px" @click="drawer3 = true">
  与 SpSidebar 组合使用
</ElButton>

<ElDrawer v-model="drawer3" size="85%" :append-to-body="true" class="el-drawer__body-p-0 el-drawer__body-bg" title="与 SpSidebar 组合使用">
  <template #default>
    <SpWithSidebar>
      <template #default>
        <SpCard title="工单管理"></SpCard>
      </template>
      <template #sidebar>
        <SpSidebar>
          <SpSidebarPane icon="customer" tip="客户信息">1</SpSidebarPane>
          <SpSidebarPane icon="application" tip="应用中心">2</SpSidebarPane>
          <SpSidebarPane icon="message" tip="消息队列">3</SpSidebarPane>
        </SpSidebar>
      </template>
    </SpWithSidebar>
  </template>
  <template #footer>
    <div style="flex: auto">
      <ElButton @click="drawer3 = false">cancel</ElButton>
      <ElButton type="primary" @click="drawer3 = false">confirm</ElButton>
    </div>
  </template>
</ElDrawer>