element-ui drawer 组件源码分享

今日简单分享 drawer 组件的源码实现,从以下五个方面来分享:

1、drawer 组件页面结构

2、drawer 组件属性

3、drawer 组件 slot

4、drawer 组件方法

5、drawer 组件事件

一、drawer 组件页面结构

二、drawer 组件属性

2.1 append-to-body 属性,Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true,类型 boolean,默认 false。

2.2 before-close 属性,关闭前的回调,会暂停 Drawer 的关闭,类型 function(done),done 用于关闭 Drawer,无默认值。

2.3 close-on-press-escape 属性,是否可以通过按下 ESC 关闭 Drawer,类型 boolean,默认 true。

2.4 custom-class 属性,Drawer 的自定义类名,类型 string,无默认值。

2.5 destroy-on-close 属性,控制是否在关闭 Drawer 之后将子元素全部销毁,类型 boolean,默认 false。

 

2.6 modal 属性,是否需要遮罩层,类型 boolean,默认 true。

2.7 modal-append-to-body 属性,遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Drawer 的父元素上,类型 boolean,默认 true。

2.8 direction 属性,Drawer 打开的方向,类型 Direction,rtl / ltr / ttb / btt,默认 rtl。

2.9 show-close 属性,是否显示关闭按钮,类型 boolean,默认 true。

2.10 size 属性,Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释,类型 number / string,默认值 '30%'。

2.11 title 属性,Drawer 的标题,也可通过具名 slot (见下表)传入,类型 string,无默认值。

组件属性使用及展示效果:

2.12 visible 属性,是否显示 Drawer,支持 .sync 修饰符,类型 boolean,默认 false。

2.13 wrapperClosable 属性,点击遮罩层是否可以关闭 Drawer,类型 boolean,默认 true。

2.14 withHeader 属性,控制是否显示 header 栏,默认 true,当此项为 false时,title attribute 和 title slot 均不生效。类型 boolean,默认 true。

三、drawer 组件 slot

3.1 title 挂载,Drawer 标题区的内容

四、drawer 组件方法

4.1 closeDrawer 方法,用于关闭 Drawer, 该方法会调用传入的 before-close 方法

五、drawer 组件事件

5.1 open 事件,Drawer 打开的回调

5.2 opened 事件,Drawer 打开动画结束时的回调

5.3 close 事件,Drawer 关闭的回调

5.4 closed 事件,Drawer 关闭动画结束时的回调

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

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

相关文章

政安晨:【Keras机器学习实践要点】(二十一)—— MobileViT:基于变换器的移动友好图像分类模型

目录 简介 导入 超参数 MobileViT 实用程序 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在评论区提出指正! …

STC89C52学习笔记(六)

STC89C52学习笔记(六) 综述:本文讲述了51单片机的定时器和中断,还讲述了如何初始化定时器、编写中断服务函数和完成定时器控制LED闪烁。 一、定时器 1. 作用 ①用于计时 ②替代长时间的Delay。因为在Delay下,单片…

php站长在线工具箱源码优化版

环境要求 PHP > 7.4MySQL > 5.6fileinfo扩展使用Redis缓存需安装Redis扩展 源码下载地址:php站长在线工具箱源码优化版.zip

stm32GPO的相关操作

GPIO的使用 1.GPIO八种工作模式1.1 上拉输入1.2 下拉输入1.3 浮空输入1.4 模拟输入1.5 推挽输出1.6 开漏输出1.7 复用推挽输出1.8 复用开漏输出 2.相关寄存器2.1 寄存器配置IO 3.相关库函数 1.GPIO八种工作模式 保护二极管的作用:用来保护IO,一般情况IO的…

【React】Ant Design社区扩展库之分割面板:react-resizable-panels

主角:react-resizable-panels 简介:来之Ant Design官方文档社区精选组件 1、效果 2、环境 react-resizable-panels: ^2.0.16next: 14.1.3react: ^18 3、安装 # npm npm install react-resizable-panels# yarn yarn add react-resizable-panels# pnpm …

AI编程005/ 逆向生成mysql的建表语句

1/ 通过insert into 语句生成建表语句 有些时候我们能获取到表的insert语句,但是没有表结构。我们可以借助AI工具,让其逆向生成mysql的建表语句。 提示词如下: 根据下面的SQL语句,逆向生存mysql的建表语句,每个字段…

文心一言上线声音定制功能;通义千问开源模型;openAI又侵权?

文心一言上线定制专属声音功能 百度旗下 AI 聊天机器人文心一言上线新功能,用户录音一句话,即可定制声音。 使用这项功能需要使用文心一言 App。在创建智能体中,点击创建自己的声音,朗读系统提示的一句话,等候几秒钟时…

【大数据】大数据概论与Hadoop

目录 1.大数据概述 1.1.大数据的概念 1.2.大数据的应用场景 1.3.大数据的关键技术 1.4.大数据的计算模式 1.5.大数据和云计算的关系 1.6.物联网 2.Hadoop 2.1.核心架构 2.2.版本演进 2.3.生态圈的全量结构 1.大数据概述 1.1.大数据的概念 大数据即字面意思&#x…

网络工程师笔记18(关于网络的一些基本知识)

网络的分类 介绍计算机网络的基本概念,这一章最主要的内容是计算机网络的体系结构-ISO 开放系统互连参考模型,其中的基本概念,例如协议实体、协议数据单元,服务数据单元、面向连接的服务和无连接的服务、服务原语、服务访问点、相…

Vscode 中调试Django程序

调试介绍: ​​​​​​​Explore the debugger Debug/调试 可以让我们在特定的代码行上暂停程序的运行。当程序暂停时,我们可以查看变量的数值,在“Debug控制台”中运行代码,或利用“Debug”工具提供的其他功能。启动Debugger/调试器会自动…

迭代器模式

前言 迭代器模式就是分离了集合对象的遍历行为,抽象出一个迭代器类来负责,这样既可以做到不暴露集合的内部结构,又可让外部代码透明地访问集合内部的数据。 迭代器模式在访问数组、集合、列表等数据时,尤其是数据库数据操作时&am…

PSO-SVM,基于PSO粒子群算法优化SVM支持向量机回归预测(多输入单输出)-附代码

PSO-SVM是一种结合了粒子群优化(Particle Swarm Optimization, PSO)算法和支持向量机(Support Vector Machine, SVM)的方法,用于回归预测问题。下面我将解释PSO-SVM的原理: 1、支持向量机(SVM&a…

系统架构评估_3.ATAM方法

架构权衡分析方法(Architecture Tradeoff Analysis Method,ATAM)是在SAAM的基础发展起来的,主要针对性能、实用性、安全性和可修改性,在系统开发之前,对这些质量属性进行评价和折中。 (1&#x…

10倍提效!用ChatGPT编写系统功能文档。。。

系统功能文档是一种描述软件系统功能和操作方式的文档。它让开发团队、测试人员、项目管理者、客户和最终用户对系统行为有清晰、全面的了解。 通过ChatGPT,我们能让编写系统功能文档的效率提升10倍以上。 ​《Leetcode算法刷题宝典》一位阿里P8大佬总结的刷题笔记…

计算机网络-TCP连接建立阶段错误应对机制

错误现象 丢包 网络问题:网络不稳定可能导致丢包,例如信号弱或干扰强。带宽限制可能导致路由器或交换机丢弃包,尤其是在高流量时段。网络拥塞时,多个数据流竞争有限的资源,也可能导致丢包。缓冲区溢出:TC…

Astra深度相机在Ubuntu18.04系统下实现相机标定

问题: 当使用Astra相机的启动的指令启动相机后,使用rviz查看相机所发布的rgb数据时,在终端会出现如下的提示信息: Camera calibration file /home/car/.ros/camera_info/rgb_Astra_Orbbec.yaml not found. Camera calibration fil…

(学习日记)2024.04.11:UCOSIII第三十九节:软件定时器

写在前面: 由于时间的不足与学习的碎片化,写博客变得有些奢侈。 但是对于记录学习(忘了以后能快速复习)的渴望一天天变得强烈。 既然如此 不如以天为单位,以时间为顺序,仅仅将博客当做一个知识学习的目录&a…

nacos分布式程序开发实例

1.通过windows docker desktop 完成 nacos 的安装/启动/配置 (1)先安装docker desktop docker-toolbox-windows-docker-for-windows-stable安装包下载_开源镜像站-阿里云 (2)配置docker 国内镜像源 Docker 镜像加速 | 菜鸟教程…

携程旅行 abtest

声明: 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!wx a15018601872 本文章…

Linux|从 STDIN 读取 Awk 输入

简介 在之前关于 Awk 工具的系列文章中,主要探讨了如何从文件中读取数据。但如果你希望从标准输入(STDIN)中读取数据,又该如何操作呢? 在本文中,将介绍几个示例,展示如何使用 Awk 来过滤其他命令…