本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js。介绍的内容已经制作成 vue-drawer-layout 组件。
前言
大家有兴趣先用手机扫一扫这个二维码，或者点我
然后点击页面中左上角的头像打开drawer或者向右向左拖拽，就可以看到下面gif的效果，打开自己的手机QQ，是不是很像:)
谷歌官方把这种布局叫做DrawerLayout（抽屉式导航栏）。那么我们要如何实现呢，好了正片开始！
HTML结构
页面结构很简单，一个抽屉，一个主容器，内容可以利用slot支持外部自行定制。
抽屉一开始是隐藏在左侧屏幕外的，故设置 left:-100% 使其整个都藏在外部
使用Touch
首先，判断浏览器是否支持 touchEvent
绑定 touchdown 事件
先定义一些变量，手指按下的x坐标记为 startX ，滑动中手指的位置x坐标记为 nowX ，drawer的x坐标偏移量记为 startPos
触发 touchstart 时，记录起始位置并绑定 touchmove ，注意：如果是 mouseEvent ，通过 e.clientX 来获取当前的x坐标，如果是 touchEvent ，要通过 e.changedTouches[0].clientX 来获取x坐标
那么，手指滑动的距离就是 nowX - startX ，当前drawer的位置为 startPos + nowX - startX ，这样抽屉已经跟随手指向右移动了，并且不会超过我们设置的拖动最大值。
区分垂直滑动和水平滑动
接下来你会发现一个问题，当手指垂直滚动主内容时，向右滑动手指也会拖出抽屉，这时应该做一件事：区分垂直滑动和水平滑动
假设，上图中的每个箭头是手指滑动的方向，绿色箭头代表可以拖出抽屉，红色箭头代表不可以拖出（注意，红色箭头也是有x坐标的偏移量的）。即当不可以拖出抽屉时，应触发默认事件，比如垂直方向的滚动等等。
当手指按下触发 touchstart 时，记录初始位置P 0 ；当滑动手指时，触发的第一次 touchmove 时，记录位置P 1 ，我们将P 0 到P 1 的矢量记为S（原谅我这个灵魂画手）
这时候很容易看出，∠θ大于某个值时，比如30度，就可能是垂直方向的滚动操作而不是拖动抽屉。所以，可以根据 y/x>tan30°
得到判断条件：
当 isVerticle 为 true 时，不执行drawer的拖动
让Drawer动起来
我们使用css3的 transition 属性使drawer具有过渡动画效果，这里写一个 moving 类
别忘了加上class绑定，拖动时是不需要过渡动画的（要跟随手指），而松开手指时才需要过渡动画。
