用作：

1. 从侧边栏滑入滑出需要展示的内容

介绍：

1. 插件遵循了UMD通用模块定义规范，能够在各种js环境下运行

2. 依赖jQuery

3. 插件可进行配置各项参数，具体如下注释部分

4. 插件暴露了open、close方法，用于打开和关闭抽屉

使用：

1. 在html中定义抽屉中需要展示的内容，并放置在最外层元素下

2. 页面加载完成之后，获取定义的元素，并调用drawer方法初始化插件，同时保存返回的drawer实例

3. 调用open方式展开抽屉

代码：

css(drawer.css)

1 .drawer {

2 height: 0%;

3 width: 100%;

4 position: fixed;

5 top: 0;

6 left: 0;

7 z-index: 1000;

8 }

9 .drawer.active {

10 height: 100%;

11 }

12 .drawer-mask {

13 position: absolute;

14 top: 0;

15 left: 0;

16 width: 100%;

17 height: 100%;

18 opacity: 0;

19 filter: alpha(opacity=45);

20 transition: opacity .3s linear;

21 }

22 .drawer-mask-show {

23 background-color: rgba(0,0,0,.45);

24 }

25 .drawer.active .drawer-mask {

26 opacity: 1;

27 }

28 .drawer-content {

29 height: 100%;

30 background-color: #fff;

31 box-shadow: none;

32 transition: transform .3s cubic-bezier(.7,.3,.1,1), box-shadow .3s cubic-bezier(.7,.3,.1,1);

33 position: absolute;

34 top: 0;

35 }

36 .drawer-content.left {

37 transform: translateX(-100%);

38 box-shadow: 2px 0 8px rgba(0,0,0,.15);

39 }

40 .drawer-content.right {

41 right: 0;

42 transform: translateX(100%);

43 box-shadow: -2px 0 8px rgba(0,0,0,.15);

44 }

45 .drawer.active .drawer-content{

46 transform: none;

47 }

48 .drawer-content-header {

49 height: 55px;

50 line-height: 55px;

51 border-bottom: 1px solid #e8e8e8;

52 }

53 .drawer-content-title {

54 color: rgba(0,0,0,.85);

55 font-weight: 600;

56 font-size: 16px;

57 margin: 0 20px;

58 }

59 .drawer-close {

60 position: absolute;

61 top: 0;

62 right: 20px;

63 font-size: 22px;

64 cursor: pointer;

65 }

66 .drawer-content-body {

67 padding: 24px;

68 max-height: calc(100% - 104px);

69 overflow: auto;

70 }

71 .drawer-content-body::-webkit-scrollbar {

72 width: 6px;

73 height: 6px;

74 background-color: hsla(0,0%,100%,0);

75 }

76 .drawer-content-body::-webkit-scrollbar-thumb {

77 border-radius: 3px;

78 background-color: #cfd6dd;

79 }

js(drawer.js)

1 /**

2 * 自定义drawer抽屉插件

3 * created by mengbing 2020/12/28

4 *

5 * 属性：

6 * placement: 抽屉方向，可选值'left'/'right'，默认'left'

7 * width: drawer的宽度，类型String，默认250px

8 * closable: 是否显示右上角关闭按钮，类型Boolean，默认true

9 * mask: 是否展示遮罩，类型Boolean，默认true

10 * maskClosable: 点击遮罩是否允许关闭，类型Boolean，默认true

11 * title: 标题，类型String

12 * afterOpenCallback: 打开抽屉后回调方法，类型function

13 * afterCloseCallback: 关闭抽屉后回调方法，类型function

14 *

15 * 方法：

16 * open: 打开抽屉

17 * close: 关闭抽屉

18 */

19 ;(function (factory) {

20 if (typeof define === 'function' && define.amd) {

21 define(['jquery'], factory);

22 } else if (typeof exports === 'object') {

23 module.exports = factory(require('jquery'));

24 } else {

25 factory(jQuery);

26 }

27 }(function ($) {

28 var mDrawer = {

29 // 初始化drawer

30 init (options) {

31 var _this = $(this)

32 mDrawer.el = _this

33

34 var defaultOptions = {

35 placement: 'left',

36 width: '250px',

37 closable: true,

38 mask: true,

39 maskClosable: true

40 }

41 $.extend(true, defaultOptions, options || {})

42 mDrawer.options = defaultOptions

43

44 // 获取目标元素内容并移除

45 var contentBody = _this.addClass('drawer').children().remove()

46

47 // mask

48 var drawerMask = $('