详细分析Element中的Drawer(附Demo)

目录

  • 前言
  • 1. 基本知识
  • 2. Demo
    • 2.1 基本用法
    • 2.2 不同方向
    • 2.3 自定义大小
    • 2.4 嵌入表单
    • 2.5 嵌套抽屉
  • 3. 实战
  • 4. Element Plus(Drawer)

前言

对于该组件针对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-drawertitle="基本抽屉":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-drawertitle="左侧抽屉":visible.sync="leftDrawer"direction="ltr"@close="handleClose('leftDrawer')"><span>左侧滑出的抽屉内容。</span></el-drawer><el-drawertitle="右侧抽屉":visible.sync="rightDrawer"direction="rtl"@close="handleClose('rightDrawer')"><span>右侧滑出的抽屉内容。</span></el-drawer><el-drawertitle="顶部抽屉":visible.sync="topDrawer"direction="ttb"@close="handleClose('topDrawer')"><span>顶部滑出的抽屉内容。</span></el-drawer><el-drawertitle="底部抽屉":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-drawertitle="小抽屉":visible.sync="smallDrawer"size="20%"@close="handleClose('smallDrawer')"><span>这是一个小抽屉。</span></el-drawer><el-drawertitle="大抽屉":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-drawertitle="表单抽屉":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-drawertitle="外层抽屉":visible.sync="outerDrawer"size="50%"@close="handleClose('outerDrawer')"><span>这是外层抽屉的内容。</span><el-button type="primary" @click="innerDrawer = true">打开内层抽屉</el-button><el-drawertitle="内层抽屉":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"plainstyle="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-drawertitle="基本抽屉":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-drawertitle="基本抽屉":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>

差异如下:

绑定可见性

  • Element 使用 :visible.sync 来绑定可见性状态。
  • Element Plus 使用 :model-value 来绑定可见性状态。

API 设计

  • Element 是基于 Vue 2 的选项式 API。
  • Element Plus 是基于 Vue 3 的组合式 API

更多的差异推荐如下:

  1. 详细分析Vue3中组合式API(附Demo)
  2. 详细分析Vue3中的props用法(父传子)
  3. 详细分析Vue3中的emit用法(子传父)
  4. 详细分析Vue3中的defineEmits基本知识(子传父)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/15790.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索 Mistral 新发布的具有原生函数调用功能的 7B 模型【附notebook文件】

引言 Mistral 发布了新版的 7B 模型&#xff0c;这次更新引入了原生函数调用功能。对于开发者和 AI 爱好者来说&#xff0c;这一更新极具吸引力&#xff0c;因为它增强了模型的功能和实用性。在这篇博客中&#xff0c;我们将深入探讨这些新功能&#xff0c;展示如何使用该模型…

小程序-修改用户头像

1、调用拍照 / 选择图片 // 修改头像 const onAvatarChange () > { // 调用拍照 / 选择图片 uni.chooseMedia({ // 文件个数 count: 1, // 文件类型 mediaType: [image], success: (res) > { console.log(res) // 本地临时文件路径 (本地路径) const { tempFilePath } …

wordpress主题模板兔Modown 9.1开心版附送erphpdown v17.1插件

Modown 9.1开心版是一款模板兔开发的wordpress主题可&#xff0c;持续更新多年&#xff0c;优秀的资源下载类主题该模板基于Erphpdown&#xff0c;可以销售软件、视频教程、文章等等&#xff0c;通过主题和插件结合可以实现付费下载、付费阅读等功能&#xff0c;配合模板兔的一…

Spring Bean的生命之舞:反射机制下的华丽转身

1. 引言 在Spring框架中&#xff0c;Bean的生命周期是一段复杂而精彩的旅程&#xff0c;其中反射机制扮演着举足轻重的角色。它不仅是Spring框架实现IoC&#xff08;控制反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;等核心功能的基础&#xff0c;也是Bean实例化…

数组-下一个排列

一、题目描述 二、解题思路 1.反向遍历当前排列&#xff0c;比如 排列A[a,b,c,d,e,f...] &#xff0c;当遍历到e时&#xff0c;说明以 a,b,c,d,e为前缀的排列中不存在A排列的下一个排列。 2.把e&#xff08;位置设为idx&#xff09;和后面的元素作比较&#xff1a; 2.1 如果有…

在控制台看到 Docker 容器内部的输出

要在控制台看到 Docker 容器内部的输出&#xff0c;你可以使用以下几种方法&#xff1a; 使用 docker logs 命令&#xff1a; 这可以查看容器的标准输出和标准错误日志。 docker logs -f [CONTAINER ID]例如&#xff0c;对于你的容器&#xff0c;可以运行&#xff1a; docker l…

【数据结构(邓俊辉)学习笔记】二叉树02——遍历

文章目录 0.概述1. 先序遍历1.1 递归版1.1.1 实现1.1.2 时间复杂度1.1.3 问题 1.2 迭代版11.3 迭代版21.3.1 思路1.3.2 实现1.3.3 实例 2. 中序遍历2.1 递归形式2.2 迭代形式2.2.1 观察2.2.2 思路&#xff08;抽象总结&#xff09;2.2.3 构思 实现2.2.4 分摊分析 3. 后序遍历3…

网络原理 一

一、协议 网络通信中,协议是非常重要的概念. 协议进行了分层,此处就是按照这几层顺序来介绍每一层中的核心协议. 应用层,就对应着应用程序,是程序员打交道最多的一层,调用系统提供的 网络api 写出的代码都是基于应用层的. 应用层这里当然也有很多现成的协议,但更多的还是,程…

JVM(三)

在上一篇中&#xff0c;介绍了JVM组件中的类加载器&#xff0c;以及相关的双亲委派机制。这一篇主要介绍运行时的数据区域 JVM架构图&#xff1a; JDK1.8后的内存结构&#xff1a; (图片来源&#xff1a;https://github.com/Seazean/JavaNote) 而在运行时数据区域中&#…

Vivado报错集合

Synth 8-5535 报错代码 [Synth 8-5535] port <clk_0> has illegal connections. It is illegal to have a port connected to an input buffer and other components. The following are the port connections : Input Buffer:Port I of instance clkin1_ibufg(IBUF) i…

SwiftUI中List的样式及使用详解(添加、移动、删除、自定义滑动)

SwiftUI中的List可是个好东西&#xff0c;它用于显示可滚动列表的视图容器&#xff0c;类似于UITableView。在List中可以显示静态或动态的数据&#xff0c;并支持垂直滚动。List是一个数据驱动的视图&#xff0c;当数据发生变化时&#xff0c;列表会自动更新。 针对List&#x…

树莓派4B 有电但无法启动

试过多个SD卡&#xff0c;反复烧系统镜像都无法启动。接HDMI显示器没有信号输出&#xff0c;上电后PWR红灯长亮&#xff0c;ACT绿灯闪一下就不亮了&#xff0c;GPIO几个电源脚有电&#xff0c;芯片会发热&#xff0c;测量多个TP点电压好像都正常。 ……

华为造车布局全曝光,对标奔驰、迈巴赫等

文 | Auto芯球 作者 | 雷慢 这一刻&#xff0c;我承认我格局小了&#xff0c; 就在刚刚&#xff0c;余承东曝光了华为智选车的布局计划&#xff0c; 华为问界、智界、享界等&#xff0c;将全面对标奔驰、迈巴赫、劳斯莱斯等车系&#xff0c; 这布局&#xff0c;确实是世界…

揭秘《庆余年算法番外篇》:范闲如何使用维吉尼亚密码解密二皇子密信

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…

Trino On K8S(Dockerfile)[建议]

文章目录 Trino On K8S&#xff08;Dockerfile&#xff09;[建议]前期准备基础镜像下载java构建 Dockerfile编写 bootstrap.sh 脚本构建镜像 部署 Trino下载 Helm 源修改配置启动 增加 Hive Catalog挂载 core-site.xml hdfs-site.xml 配置修改 coordinator/worker configmap修改…

Python开发Android手机APP

Kivy是一个开源的Python库&#xff0c;用于快速开发跨平台的触摸应用程序。它特别适合创建具有图形用户界面&#xff08;GUI&#xff09;的应用&#xff0c;尤其是那些需要在多种操作系统&#xff08;如Windows、macOS、Linux、Android和iOS&#xff09;上运行的多点触控应用。…

【yolov10】使用自己的数据集训练目标检测模型

【yolov10】使用自己的数据集训练目标检测模型 一、anaconda安装二、环境配置三、数据集制作1、labelimg的安装2、使用labelimg 四、正片1、下载yolov10源码2、数据集目录3、训练4、推理 一、anaconda安装 直接参考前一篇博客&#xff1a; https://blog.csdn.net/m0_71523511/…

42、Flink 关于窗口状态大小的考量

关于状态大小的考量 窗口可以被定义在很长的时间段上&#xff08;比如几天、几周或几个月&#xff09;并且积累下很大的状态&#xff0c;当估算窗口计算的储存需求时&#xff0c;注意如下&#xff1a; Flink 会为一个元素在它所属的每一个窗口中都创建一个副本。 因此&#x…

融捷科技(武汉)有限公司 面试总结/华润医药商业集团武汉有限公司武汉共享中心 软件开发面试总结/深圳市卓讯信息技术有限公司 软件开发面试总结

深圳市卓讯信息技术有限公司/Java高级/技术经理 自我介绍对方公司情况介绍最大的并发的项目介绍下为了解决并发做了哪些事情最熟悉的项目介绍下上千万的数据,如果通过身份证号码的后六位查询到对应条件的数据,要求在2秒内查询出结果。。。。。瞎扯淡部分融捷科技(武汉)有限…

击穿盲点——【网络安全】社会工程学中的网络欺骗

社会工程学起源于上世纪60年代左右&#xff0c;是一种通过人际交流的方式来获得情报的非技术渗透手段。这种手段无需过多技术要求&#xff0c;却非常有效&#xff0c;目前已成为危害企业网络安全的重大威胁之一。著名黑客凯文米特尼克在《反欺骗的艺术》中曾提到&#xff0c;人…