之前没有这个组件的时候是直接把dialog的样式改了，改成了侧弹窗的形式，element升级后就改成了Drawer 抽屉组件。
场景 ：Drawer 的关闭动画没有了。代码如下

<el-drawer
  title="我是标题"
  v-if="drawer"
  :visible.sync="drawer"
  :before-close="handleClose">
  <span>我来啦!</span>
</el-drawer>
<script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
    methods: {
      handleClose(done) {   //使用before-close会暂停 Drawer 的关闭
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          .catch(_ => {});
</script>
原因：使用了v-if控制Drawer 的显示
 解决：去掉v-if，但是去掉v-if之后，drawer就和app同级了，样式包裹在页面的class里就没用
 
visible.sync和v-if、v-show
 
 
visible.sync：双向绑定值。
 初始情况下通过该值控制 dialog显示。dialog关闭的时候，element自动设置该值为false。
 当子组件执行 close 事件的时候，不仅改变了自己内部的 isShow 的值，而且还将 父组件的 visible的状态发生了改变.
 
 
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
 v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
 
 
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
 
 
visible.sync和v-if、v-show的使用场景
 
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。但是父子组件，在子组件 close 方法中,虽然已经将 isShow 改变为 false，但是并没有通知到 父组件，而在父组件中，控制弹出框的现实和隐藏是通过 show 。点击子组件的关闭按钮时，父组件的 show 没有发生改变，这时候需要用visible.sync。
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此，想要重新渲染可以添加一个具有唯一值的 key 属性
                    之前没有这个组件的时候是直接把dialog的样式改了，改成了侧弹窗的形式，element升级后就改成了Drawer 抽屉组件。场景：Drawer 的关闭动画没有了。代码如下&lt;el-drawer  title="我是标题"  v-if="drawer"  :visible.sync="drawer"  :before-close="handleClose"&gt;  &lt;sp...
  <div class="home">
  	//执行交互的元素（这里用的是按钮）
    <el-button @click="drawer = true" type="primary">点我打开</el-button>
    // el-drawer组件
    <el-drawer
				
可配合自定义表格进行操作数据，点击表格某一行进行抽屉展示，可上下页切换查看及功能操作，1.快捷键esc关闭抽屉，// 快捷键控制上下翻页  shiftKey+上键 上一页    shiftKey加下键 下一页  shiftKey加左键 开启弹框展示第一条数据   shiftKey加右键关闭弹框上代码
js实现拉伸部分......
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title&g.
				
el-drawer组件封装及调用（包含动画效果）
开发项目中用到elementUI的抽屉组件，但是都没有去封装成组件并且加入动画效果，这篇文章参考其他人的文章写的，在这里只是做个记录；
界面效果参考elementui官网【网址：https://element.eleme.io/#/zh-CN/component/drawer】动画效果即可；这里就不展示了；
为尊重他人成果，这里是在下参考借鉴的网址：
废话不多说，上代码并进行注释
以下是封装好的组件
<template>
    其实也很简单，核心是设置父元素position:relative或absolute，再设置el-drawer的position:absolute，使它相对于它的父元素定位
部分代码示例： （*注:vue语法环境）
<div style="height:680px">
    <h2>这里是h2...
首先，在Vue组件中引入Element Plus的抽屉组件：
```javascript
import { ElDrawer } from 'element-plus';
然后，在模板中使用ElDrawer组件来创建抽屉：
```html
<template>
  <el-drawer :visible="drawerVisible" :before-close="beforeClose">
    <!-- 抽屉内容 -->
  </el-drawer>
</template>
在data中定义drawerVisible属性来控制抽屉的显示与隐藏：
```javascript
data() {
  return {
    drawerVisible: false
在methods中定义beforeClose方法来处理抽屉关闭前的逻辑：
```javascript
methods: {
  beforeClose(done) {
    // 处理关闭前的逻辑
    // 可以在这里重置表单数据等操作
    done(); // 调用done方法关闭抽屉
最后，通过按钮或其他交互方式来控制抽屉的显示与隐藏：
```html
<template>
  <button @click="drawerVisible = true">打开抽屉</button>
</template>
这样就可以在Vue3中使用Element Plus的抽屉组件了。请根据你的具体需求进行相应的修改和调整。\[1\]\[2\]
#### 引用[.reference_title]
-  *1* [vue3 elementplus el-drawer抽屉 实现在指定组件里打开](https://blog.csdn.net/niyooooo/article/details/126153176)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
-  *2* *3* [[vue3] 定义图库抽屉组件](https://blog.csdn.net/HeyVIrBbox/article/details/127609522)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]