element-ui 抽屉 教程

### Element UI 抽屉组件教程

Element UI 的抽屉 (`el-drawer`) 组件提供了一种侧边弹出的内容展示方式，适用于显示额外的信息或操作面板。以下是创建和配置 `el-drawer` 组件的方法[^1]。

#### 基本用法

要使用 `el-drawer`，首先需引入 Element UI 库并注册该组件：

<template>
  <div id="app">
    <!-- 触发按钮 -->
    <button @click="drawerVisible = true">打开抽屉</button>

    <!-- 抽屉组件 -->
    <el-drawer :visible.sync="drawerVisible" title="这是标题">
      <p>一些文字说明。</p>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
    };
  },
};
</script>

此代码片段展示了如何通过点击按钮来控制抽屉的显隐状态，并设置了简单的内部内容与标题。

#### 配置属性

可以自定义多个属性来自定义抽屉的行为和外观，例如方向、大小等：

| 属性名 | 描述 |
| --- | --- |
| direction | 设置抽屉滑动的方向，默认为rtl (右至左)，可选值还有ltr(左至右),ttb(上至下),btb(下至上)|
| size | 定义抽屉宽度（对于水平方向）或高度（垂直方向），默认是30%|

更多高级设置可以通过查阅官方文档获得支持。