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 关闭动画结束时的回调

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vulhub之fastjson篇-1.2.27-rce

一、启动环境 虚拟机:kali靶机:192.168.125.130/172.19.0.1(docker地址:172.19.0.2) 虚拟机:kali攻击机:192.168.125.130/172.19.0.1 本地MAC:172.XX.XX.XX 启动 fastjson 反序列化导致任意命令执行漏洞 环境 1.进入 vulhub 的 Fastjson 1.2.47 路径 cd /../../vulhub/fa…

vue前端项目到后端执行逻辑——自己改的话要怎么改

文章目录 vue前端项目到后端流程——自己改的话要怎么改 vue前端项目到后端流程——自己改的话要怎么改

外部模块介绍(七) 蓝牙HC05

HC05原理图 2. 蓝牙模块的调试 2.1 两种工作模式: HC-05蓝牙串口通讯模块具有两种工作模式:命令响应工作模式和自动连接工作模式。在自动连接工作模式下模块又可分为主(Master)、从(Slave)和回环(Loopback)三种工作角色。 当模块处于自动连接工作模式时,将自动根据事…

深入解析template,掌握C++模板的精髓!

掌握C模板(template)的优雅之道! 一、什么是模板?二、模板如何工作?三、C 中的模板类型3.1、 类模板3.2、 函数模板 四、模板参数推导4.1、模板参数推导示例4.2、函数模板参数推导4.3、类模板参数推导(C17 …

Spring 源码学习笔记(二)之Bean标签默认属性的解析

分析调用栈 Spring 通过读取 xml 配置文件注册 bean ,通过工厂可以获取注册的 bean,示例代码: XmlBeanFactory beanFactory new XmlBeanFactory(new ClassPathResource("applicationContext.xml")); Object main beanFactory.g…

通过网络api获取日期对应的节假日信息

网络接口获取链接&#xff1a;免费节假日API_原百度节假日API HolidayJudge.h #pragma once#include <QtWidgets/QWidget> #include "ui_HolidayJudge.h"enum DATESTATE {WORK0,//工作日DAYOFF,//休息日HOLIDAY//节假日 };class HolidayJudge : public QWidg…

F5防火墙如何应对恶意攻击?一文搞懂

当前&#xff0c;5G网络模糊了安全防护边界&#xff0c;加速了全球网络攻击升级&#xff0c;攻防对抗变得日益激烈&#xff0c;导致传统网络安全防护措施越来越难以有效预测和应对潜在威胁。面对复杂部署环境&#xff0c;企业的安全团队正在努力寻找一致性的安全防护和可见性策…

谷歌浏览器用不了怎么办?

打开谷歌浏览器点击右上角的三个点 &#xff0c; 点击设置 在搜索引擎里面把这个改成百度 然后越狱登录你的谷歌账号就可以用了 我个人用的越狱软件是r2rayn &#xff0c; 浏览器上面可以搜索的 默认浏览器那里可以设置成谷歌

IP网络对讲广播系统审计

前言 这个系统是前两年在一个内网遇到的&#xff0c;当时顺手试了一个admin登陆之后再没有然后了&#xff0c;最近发现有大佬分享关于这个系统的漏洞&#xff0c;于是就把自己当初看的几个漏洞分享一下&#xff0c;系统比较简单&#xff0c;漏洞点很多&#xff0c;不要做坏事哦…

C++练级之路——类和对象(上)

1、类的定义 class 类名{//成员函数 //成员变量}; class为定义的关键字&#xff0c;{ }内是类的主体&#xff0c;注意后面的 ; 不要忘了 类体中的内容成为类的成员&#xff0c;类中的变量为成员变量或类的属性&#xff0c;类中的函数为成员函数或类的方法&#xff0c; 类的两种…

【Shell语言学堂】Shell 脚本练习1

Shell 脚本练习 shell语言实战 Shell 脚本练习&#x1f4a7;CSDN划过手的泪滴t现有一个脚本可传入n个参数&#xff0c;要求在脚本中实现在终端输出第n个参数之前的所有参数(不包含第n个参数)编写一个计算bmi体质指数的脚本&#xff0c;该脚本需要用户输入身高和体重信息&#x…

单调栈(LeetCode-下一个更大元素)

每日一题 今天刷到了一道用到单调栈来解决的题目&#xff0c;想到自己没有总结过单调栈的知识点&#xff0c;因此想总结一下。 介绍 什么是单调栈&#xff1f; 单调栈的定义其实很简单&#xff0c;所谓单调栈就是指一个单调递增或是单调递减的栈。 那单调栈有什么用呢&#x…

CSS层叠样式表学习(基础选择器)

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS&#xff08;2&#xff09;的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 二、CSS基础选择器 2.1 CSS选择器的作用 2.2 选择器分类 2.3 标签选择器 2.…

Windows系统下安装java开发环境所需的JDK开发工具包

目录 一、JDK开发工具包下载二、安装三、环境变量配置3.1 添加安装包路径3.2 添加lib路径3.3 添加bin目录 四、检查是否安装成功五、总结 一、JDK开发工具包下载 官网地址&#xff1a;JDK下载 打开网址后有多个版本的JDK&#xff0c;学者根据自己电脑需求选择对应版本下载。如…

精酿啤酒:传统酿造与现代工艺的结合

在啤酒酿造领域&#xff0c;传统酿造与现代工艺的结合是提品质和生产效率的重要途径。Fendi Club啤酒在酿造过程中&#xff0c;巧妙地将传统酿造工艺与现代技术相结合&#xff0c;为消费者带来了品质的啤酒体验。 Fendi Club啤酒注重传统的天然原料选择。他们坚持使用大麦、啤酒…

免费云服务器汇总,最长永久免费使用

随着云计算技术的快速发展&#xff0c;越来越多的企业和个人开始将业务迁移到云端。云服务器作为云计算的重要组成部分&#xff0c;以其灵活、高效、可扩展等特点受到广泛关注。然而&#xff0c;许多人在初次接触云服务器时&#xff0c;可能会对高昂的价格望而却步。为了帮助大…

day76 jquery

知识点: 1 在HTML中引入jQuery 2 jQuery中就绪函数 3 jQuery中选择器 4 使用jQuery获取表单元素的值 及标签中间的内容 5 jQuery中获取标签属性 6 jQuery设置和获取标签样式 ----------------------------------- 一 在HTML中引入jQuery 1 1) 把jQue…

工作这么久,你有测试思维了吗?

在如今竞争激烈的职场中&#xff0c;拥有测试思维已成为一个不可或缺的技能。无论你是从事软件开发、项目管理还是市场营销等各行各业&#xff0c;测试思维都能够帮助你更好地解决问题、提高工作效率以及保障质量。然而&#xff0c;工作时间的长短并不代表一个人是否具备测试思…

python ConfigParser:Python 标准库,ini 文件解析器

大家好&#xff01;在进行接口自动化工作时&#xff0c;配置文件是非常常见和重要的一部分。Python 提供了一个强大的标准库——ConfigParser&#xff0c;用于解析和处理 INI 文件。在本文中&#xff0c;我们将介绍如何使用 ConfigParser 来读取和操作 INI 文件&#xff0c;并提…

【Linux进阶之路】ARP欺骗实验

正文 话不多说&#xff0c;直接干&#xff01; 首先我们需要准备一下环境&#xff0c;先配置VMARE&#xff0c;然后下载KALI的虚拟机。 详细的安装教程视频&#xff1a;点击跳转&#xff0c;下载KALI可能要半个小时&#xff0c;中间可以看个剧玩个游戏缓一缓。 配置好之后&am…