当选择抽屉在右边时，动画过程中会出现滚动条，看起来让我的UI组件大打折扣，针对这个问题我打算在组件中监听drawerVisible，当它需要被展示时禁用body的滚动效果，当它不需要被展示时，还原body的展示效果
watch: { drawerVisible(n, o) { if (n == true) { document.documentElement.style.overflowY = "hidden"; document.documentElement.style.overflowX = "hidden"; } } },
b.向下冒泡bug
在点击抽屉以外的区域可以正常关闭抽屉，但是我发现当我点击抽屉非按钮区域时，也会关闭抽屉，这是向下冒泡的bug，这个bug我的解决方案是在drawer_body上添加个无意义的事件，并阻止向上冒泡
<div @click.stop="clickBg_" // 注意这里 :style="{ 'right':direction=='right'?'0':'auto', 'left':direction=='left'?'0':'auto', 'width':width+'px', 'background': background, 'overflow-y':scroll?'scroll':'hidden'}" > </div>
二、API文档
1.属性
属性
描述
类型
默认
drawerVisible
是否显示drawer
Boolean
false
direction
drawer方向
String
left
width
drawer宽度
Number
400
background
drawer背景色
String
#ffffff
mask
是否显示遮罩层
Boolean
true
title
drawer标题
Boolean
true
closeBtn
是否显示关闭按钮
String
---
scroll
是否开启滚动
Boolean
false
2.事件
事件
描述
返回值
close
监听关闭事件
无
footerOk
页脚确认绑定事件，使用默认页脚时有效
无
footerCal
页脚取消绑定事件，使用默认页脚时有效
无
3.slot
name
描述
header
页头插槽名称
default
抽屉主体部分，可省略
footer
页脚插槽名称
注意：插槽里的按钮都是使用element内置的组件，如果你的项目里没有引入element库
那最好请使用具名插槽重写页头和页脚部分