详细分析Element中的Drawer（附Demo）

码农研究僧

已于 2024-05-22 16:01:51 修改

阅读量627

点赞数 7

分类专栏：前端/小程序文章标签：前端 javascript vue.js Element Element Plus

于 2024-05-21 18:50:20 首次发布

本文链接：https://blog.csdn.net/weixin_47872288/article/details/139099788

版权

前端/小程序专栏收录该内容

52 篇文章 1 订阅

订阅专栏

前言

对于该组件针对Vue2比较多，而Element Plus中的Drawer针对Vue3比较多

此处的Demo主要偏向Vue2
后续的Element Plus 偏向Vue3

1. 基本知识

Drawer 组件可以用于从屏幕的边缘滑入一个面板，用来显示额外的内容而不会离开当前页面视图

主要属性如下：

visible：是否显示抽屉，Boolean 类型，默认值为 false
direction：抽屉滑出的方向，可以是 ‘ltr’（左侧滑出）、‘rtl’（右侧滑出）、‘ttb’（顶部滑出）、‘btt’（底部滑出），默认值为 ‘rtl’
size：抽屉的大小，可以是具体的像素值或者百分比，默认值为 ‘30%’
title：抽屉的标题，String 类型
append-to-body：是否将 Drawer 添加到 body 元素上，Boolean 类型，默认值为 false

事件：

open：抽屉打开时触发的事件
close：抽屉关闭时触发的事件

2. Demo

更多的Demo如下：

2.1 基本用法

<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>
    <el-drawer
      title="基本抽屉"
      :visible.sync="drawerVisible"
      @close="handleClose">
      <span>这是一个基本的抽屉内容。</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false
    };
  },
  methods: {
    handleClose() {
      console.log('抽屉已关闭');
    }
  }
};
</script>

2.2 不同方向

<template>
  <div>
    <el-button type="primary" @click="leftDrawer = true">左侧滑出</el-button>
    <el-button type="primary" @click="rightDrawer = true">右侧滑出</el-button>
    <el-button type="primary" @click="topDrawer = true">顶部滑出</el-button>
    <el-button type="primary" @click="bottomDrawer = true">底部滑出</el-button>

    <el-drawer
      title="左侧抽屉"
      :visible.sync="leftDrawer"
      direction="ltr"
      @close="handleClose('leftDrawer')">
      <span>左侧滑出的抽屉内容。</span>
    </el-drawer>

    <el-drawer
      title="右侧抽屉"
      :visible.sync="rightDrawer"
      direction="rtl"
      @close="handleClose('rightDrawer')">
      <span>右侧滑出的抽屉内容。</span>
    </el-drawer>

    <el-drawer
      title="顶部抽屉"
      :visible.sync="topDrawer"
      direction="ttb"
      @close="handleClose('topDrawer')">
      <span>顶部滑出的抽屉内容。</span>
    </el-drawer>

    <el-drawer
      title="底部抽屉"
      :visible.sync="bottomDrawer"
      direction="btt"
      @close="handleClose('bottomDrawer')">
      <span>底部滑出的抽屉内容。</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftDrawer: false,
      rightDrawer: false,
      topDrawer: false,
      bottomDrawer: false
    };
  },
  methods: {
    handleClose(drawer) {
      this[drawer] = false;
      console.log(`${drawer} 抽屉已关闭`);
    }
  }
};
</script>

2.3 自定义大小

<template>
  <div>
    <el-button type="primary" @click="smallDrawer = true">小抽屉</el-button>
    <el-button type="primary" @click="largeDrawer = true">大抽屉</el-button>

    <el-drawer
      title="小抽屉"
      :visible.sync="smallDrawer"
      size="20%"
      @close="handleClose('smallDrawer')">
      <span>这是一个小抽屉。</span>
    </el-drawer>

    <el-drawer
      title="大抽屉"
      :visible.sync="largeDrawer"
      size="70%"
      @close="handleClose('largeDrawer')">
      <span>这是一个大抽屉。</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      smallDrawer: false,
      largeDrawer: false
    };
  },
  methods: {
    handleClose(drawer) {
      this[drawer] = false;
      console.log(`${drawer} 抽屉已关闭`);
    }
  }
};
</script>

2.4 嵌入表单

<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">打开表单抽屉</el-button>
    <el-drawer
      title="表单抽屉"
      :visible.sync="drawerVisible"
      size="50%"
      @close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      form: {
        username: '',
        email: ''
      }
    };
  },
  methods: {
    handleClose() {
      console.log('表单抽屉已关闭');
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('提交成功', this.form);
          this.drawerVisible = false;
        } else {
          console.error('表单验证失败');
        }
      });
    }
  }
};
</script>

2.5 嵌套抽屉

<template>
  <div>
    <el-button type="primary" @click="outerDrawer = true">打开外层抽屉</el-button>

    <el-drawer
      title="外层抽屉"
      :visible.sync="outerDrawer"
      size="50%"
      @close="handleClose('outerDrawer')">
      <span>这是外层抽屉的内容。</span>
      <el-button type="primary" @click="innerDrawer = true">打开内层抽屉</el-button>
      
      <el-drawer
        title="内层抽屉"
        :visible.sync="innerDrawer"
        size="30%"
        @close="handleClose('innerDrawer')">
        <span>这是内层抽屉的内容。</span>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outerDrawer: false,
      innerDrawer: false
    };
  },
  methods: {
    handleClose(drawer) {
      this[drawer] = false;
      console.log(`${drawer} 抽屉已关闭`);
    }
  }
};
</script>

3. 实战

对于实战中的Demo（部分）

<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :permission="permissionList"
               :before-open="beforeOpen"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @tree-load="treeLoad">
      <template slot-scope="{row}" slot="menu">
        <el-button type="text"
                   icon="el-icon-setting"
                   size="small"
                   v-if="permission.api_scope_setting"
                   plain
                   style="border: 0;background-color: transparent !important;"
                   @click.stop="handleDataScope(row)">权限配置
        </el-button>
      </template>
      <template slot-scope="{row}" slot="source">
        <div style="text-align:center">
          <i :class="row.source"/>
        </div>
      </template>
    </avue-crud>
    <el-drawer :title="`[${scopeMenuName}] 接口权限配置`" :visible.sync="drawerVisible" :direction="direction"
               append-to-body
               :before-close="handleDrawerClose" size="1000px">
      <basic-container>
        <avue-crud :option="optionScope"
                   :data="dataScope"
                   :page="pageScope"
                   v-model="formScope"
                   :table-loading="scopeLoading"
                   ref="crudScope"
                   @row-del="rowDelScope"
                   @row-update="rowUpdateScope"
                   @row-save="rowSaveScope"
                   :before-open="beforeOpenScope"
                   @search-change="searchChangeScope"
                   @search-reset="searchResetScope"
                   @selection-change="selectionChangeScope"
                   @current-change="currentChangeScope"
                   @size-change="sizeChangeScope"
                   @on-load="onLoadScope">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-delete"
                       plain
                       @click="handleDeleteScope">删 除
            </el-button>
          </template>
          <template slot-scope="{row}"
                    slot="scopeType">
            <el-tag>{{row.scopeTypeName}}</el-tag>
          </template>
        </avue-crud>
      </basic-container>
    </el-drawer>
  </basic-container>
</template>

截图如下：

在这里插入图片描述

对应的弹窗风格如下：

4. Element Plus（Drawer）

既然阐述到Element 的Drawer，那么看看Element Plus中的有啥差异

基本用法的对比：

<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>
    <el-drawer
      title="基本抽屉"
      :visible.sync="drawerVisible"
      @close="handleClose">
      <span>这是一个基本的抽屉内容。</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false
    };
  },
  methods: {
    handleClose() {
      console.log('抽屉已关闭');
    }
  }
};
</script>

Element Plus：

<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>
    <el-drawer
      title="基本抽屉"
      :model-value="drawerVisible"
      @close="handleClose">
      <span>这是一个基本的抽屉内容。</span>
    </el-drawer>
  </div>
</template>

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

export default {
  setup() {
    const drawerVisible = ref(false);

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

    return {
      drawerVisible,
      handleClose
    };
  }
};
</script>