抽屉 Drawer

对应 Arco Drawer，标题、内容与底部操作使用主题间距。 属性用法见 Element Plus 文档。

方向与打开

选择方向后打开抽屉，弹出层使用正常遮罩与关闭行为。

RightLeftTopBottom

Project details

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
const direction = ref<'rtl' | 'ltr' | 'ttb' | 'btt'>('rtl')
</script>

<template>
  <el-radio-group v-model="direction">
    <el-radio-button value="rtl">Right</el-radio-button>
    <el-radio-button value="ltr">Left</el-radio-button>
    <el-radio-button value="ttb">Top</el-radio-button>
    <el-radio-button value="btt">Bottom</el-radio-button>
  </el-radio-group>
  <el-button type="primary" @click="open = true">Open drawer</el-button>
  <el-drawer v-model="open" :direction="direction" title="Project details" size="300px">
    Review the project details here.
    <template #footer><el-button @click="open = false">Close</el-button></template>
  </el-drawer>
</template>

与 Arco 的差异

• 默认宽度保留 Element Plus 的 30%，Arco 默认是 250px；可用 size 显式设置。