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

相关推荐
之歆3 分钟前
DAY_12JavaScript DOM 完全指南(三):高级工程篇
开发语言·前端·javascript·ecmascript
来恩10038 分钟前
EL表达式应用
前端·javascript·vue.js
wh_xia_jun19 分钟前
Vue3 + Vitest 浏览器测试 从零开发指南
前端·javascript·vue.js
唐青枫22 分钟前
别再让 key 写成字符串:TypeScript keyof 从入门到实战
前端·javascript·typescript
天外飞雨道沧桑8 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
给钱,谢谢!10 小时前
React + PixiJS 实现果园成长页:从状态机到浇水动画
前端·react.js·前端框架
暗冰ཏོ11 小时前
VUE面试题大全
前端·javascript·vue.js·面试
豹哥学前端14 小时前
事件循环(Event Loop)深度解析:让你彻底搞懂 JS 的执行顺序
前端·javascript·面试
竹林81814 小时前
用 wagmi v2 + Next.js 14 搞 NFT 交易市场前端:从合约调用失败到顺利上架,我踩了哪些坑
javascript·next.js
前端不开发14 小时前
用一个 Bookmarklet(书签脚本),给任意网页挂一个可拖拽悬浮窗
前端·javascript