elementUI Drawer如何使用

Element UI 提供了一个名为 `el-drawer` 的抽屉组件，用于创建一个可滑动的面板，通常用来展示额外的信息或者导航菜单。以下是基本的使用步骤：

1. 首先，在项目中引入 `element-ui` 和对应的样式：

   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

2. 然后在你的 HTML 结构中添加 `<el-drawer>` 标签：

   <div id="app">
     <!-- 主体内容 -->
     <button @click="drawerVisible = true">打开抽屉</button>
     <el-drawer
       v-model="drawerVisible"
       :width="200"    <!-- 抽屉宽度，默认为256 -->
       :direction="direction"   <!-- 可选值：left、right、top、bottom -->
     >
       抽屉内容
     </el-drawer>
   </div>

这里通过 `v-model` 挂载一个布尔属性 `drawerVisible` 控制抽屉的显示与隐藏，`direction` 属性则设置抽屉的移动方向。

3. 在 Vue 实例中定义状态和方法：

   new Vue({
     el: '#app',
     data: {
       drawerVisible: false,    // 初始隐藏
       direction: 'left'      // 默认水平从左拉出
     },
     methods: {
       toggleDrawer() {
         this.drawerVisible = !this.drawerVisible;
       }
     }
   });

当点击按钮时，`toggleDrawer` 方法会被调用，改变 `drawerVisible` 的值来控制抽屉的开关。