el-drawer详解

el-drawer 是 Element Plus 框架中的一个抽屉组件，用于在页面边缘弹出一个抽屉面板，通常用于展示额外的信息或操作。

一。 el-drawer 属性详解

1. visible:

   • 类型: Boolean
   • 用途: 抽屉是否可见。
   • 默认值: false

2. direction:

   • 类型: String
   • 用途: 抽屉的打开方向，可选值为 ltr（从左到右）、rtl（从右到左）、ttb（从上到下）、btt（从下到上）。
   • 默认值: rtl

3. size:

   • 类型: String | Number
   • 用途: 抽屉的宽度（水平方向）或高度（垂直方向）。
   • 默认值: 30%

4. title:

   • 类型: String
   • 用途: 抽屉的标题。

5. before-close:

   • 类型: Function
   • 用途: 关闭前的回调函数。

6. destroy-on-close:

   • 类型: Boolean
   • 用途: 关闭时是否销毁 DOM 结构。
   • 默认值: false

7. modal:

   • 类型: Boolean
   • 用途: 是否需要遮罩层。
   • 默认值: true

8. modal-append-to-body:

   • 类型: Boolean
   • 用途: 遮罩层是否插入至 body 元素上。
   • 默认值: true

9. custom-class:

   • 类型: String
   • 用途: 自定义类名。

10. wrapper-closable:

    • 类型: Boolean
    • 用途: 是否可以通过点击遮罩层关闭抽屉。
    • 默认值: true

二。 el-drawer 事件详解

1. open:

   • 类型: Function
   • 用途: 抽屉打开时触发的事件

2. opened:

   • 类型: Function
   • 用途: 抽屉完全打开时触发的事件。

3. close:

   • 类型: Function
   • 用途: 抽屉关闭时触发的事件。

4. closed:

   • 类型: Function
   • 用途: 抽屉完全关闭时触发的事件。

三。 el-drawer 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 抽屉的内容。

2. title:

   • 插槽名称: title
   • 用途: 抽屉的标题。

四。示例代码

<template>
  <div>
    <h2>Drawer 示例</h2>

    <!-- 基本用法 -->
    <el-button type="primary" @click="drawerVisible1 = true">打开抽屉</el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawerVisible1"
      direction="rtl"
      size="30%"
      @open="handleOpen"
      @opened="handleOpened"
      @close="handleClose"
      @closed="handleClosed"
    >
      <p>这是一个基本的抽屉示例。</p>
    </el-drawer>

    <!-- 自定义标题 -->
    <el-button type="primary" @click="drawerVisible2 = true">打开自定义标题抽屉</el-button>
    <el-drawer
      :visible.sync="drawerVisible2"
      direction="ltr"
      size="40%"
    >
      <template #title>
        <h3>自定义标题</h3>
      </template>
      <p>这是一个自定义标题的抽屉示例。</p>
    </el-drawer>

    <!-- 垂直方向 -->
    <el-button type="primary" @click="drawerVisible3 = true">打开垂直方向抽屉</el-button>
    <el-drawer
      title="垂直方向"
      :visible.sync="drawerVisible3"
      direction="ttb"
      size="50%"
    >
      <p>这是一个垂直方向的抽屉示例。</p>
    </el-drawer>

    <!-- 禁用遮罩层关闭 -->
    <el-button type="primary" @click="drawerVisible4 = true">打开禁用遮罩层关闭抽屉</el-button>
    <el-drawer
      title="禁用遮罩层关闭"
      :visible.sync="drawerVisible4"
      direction="btt"
      size="60%"
      :wrapper-closable="false"
    >
      <p>这是一个禁用遮罩层关闭的抽屉示例。</p>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const drawerVisible1 = ref(false)
const drawerVisible2 = ref(false)
const drawerVisible3 = ref(false)
const drawerVisible4 = ref(false)

const handleOpen = () => {
  console.log('抽屉打开')
}

const handleOpened = () => {
  console.log('抽屉完全打开')
}

const handleClose = () => {
  console.log('抽屉关闭')
}

const handleClosed = () => {
  console.log('抽屉完全关闭')
}
</script>

五。 代码解释

1. 基本用法:

   • 使用 el-drawer 组件并绑定 visible 属性，设置 direction 和 size。

   • <el-button type="primary" @click="drawerVisible1 = true">打开抽屉</el-button>
     <el-drawer
       title="我是标题"
       :visible.sync="drawerVisible1"
       direction="rtl"
       size="30%"
       @open="handleOpen"
       @opened="handleOpened"
       @close="handleClose"
       @closed="handleClosed"
     >
       <p>这是一个基本的抽屉示例。</p>
     </el-drawer>
     

2. 自定义标题:

   • 使用 title 插槽自定义抽屉的标题。

   • <el-button type="primary" @click="drawerVisible2 = true">打开自定义标题抽屉</el-button>
     <el-drawer
       :visible.sync="drawerVisible2"
       direction="ltr"
       size="40%"
     >
       <template #title>
         <h3>自定义标题</h3>
       </template>
       <p>这是一个自定义标题的抽屉示例。</p>
     </el-drawer>
     

3. 垂直方向:

   • 设置 direction 属性为 ttb 或 btt 以实现垂直方向的抽屉。

   • <el-button type="primary" @click="drawerVisible3 = true">打开垂直方向抽屉</el-button>
     <el-drawer
       title="垂直方向"
       :visible.sync="drawerVisible3"
       direction="ttb"
       size="50%"
     >
       <p>这是一个垂直方向的抽屉示例。</p>
     </el-drawer>
     

4. 禁用遮罩层关闭:

   • 使用 wrapper-closable 属性禁用通过点击遮罩层关闭抽屉的功能。

   • <el-button type="primary" @click="drawerVisible4 = true">打开禁用遮罩层关闭抽屉</el-button>
     <el-drawer
       title="禁用遮罩层关闭"
       :visible.sync="drawerVisible4"
       direction="btt"
       size="60%"
       :wrapper-closable="false"
     >
       <p>这是一个禁用遮罩层关闭的抽屉示例。</p>
     </el-drawer>