let pos = startPos + nowX - startX;
pos = Math.min(width, pos); //不能超过滑动最大值
pos = Math.max(0, pos); //不能小于0
this.pos = pos; //设置滚动距离为拖动的距离
}.bind(this);
那么，手指滑动的距离就是 nowX – startX ，当前drawer的位置为 startPos + nowX – startX ，这样抽屉已经跟随手指向右移动了，并且不会超过我们设置的拖动最大值。
区分垂直滑动和水平滑动
接下来你会发现一个问题，当手指垂直滚动主内容时，向右滑动手指也会拖出抽屉，这时应该做一件事：区分垂直滑动和水平滑动
当然，办法有很多，这里先介绍一种利用三角函数来判定的方法
假设，上图中的每个箭头是手指滑动的方向，绿色箭头代表可以拖出抽屉，红色箭头代表不可以拖出（注意，红色箭头也是有x坐标的偏移量的）。即当不可以拖出抽屉时，应触发默认事件，比如垂直方向的滚动等等。
当手指按下触发 touchstart 时，记录初始位置P 0 ；当滑动手指时，触发的第一次 touchmove 时，记录位置P 1 ，我们将P 0 到P 1 的矢量记为S（原谅我这个灵魂画手）
这时候很容易看出，∠θ大于某个值时，比如30度，就可能是垂直方向的滚动操作而不是拖动抽屉。所以，可以根据 y/x>tan30°
得到判断条件：
if (isVerticle === undefined) isVerticle = Math.abs(nowY - startY) / Math.abs(nowX - startX) > (Math.sqrt(3) / 3);当 isVerticle 为 true 时，不执行drawer的拖动
让Drawer动起来
我们使用css3的 transition 属性使drawer具有过渡动画效果，这里写一个 moving 类
.moving
transition transform .3s ease别忘了加上class绑定，拖动时是不需要过渡动画的（要跟随手指），而松开手指时才需要过渡动画。
<div class="drawer-wrap" :class="{'moving':moving,'will-change':willChange}"
:style="{width:`${width}px`,left:`-${width)}px`,transform:`translate3d(${pos}px,0,0)`}">
<slot name="drawer"></slot>
</div>所以绑定 touchend 事件的方法时要做这些步骤
const removeDrag = function (e) {
if (isVerticle !== undefined) {
if (!isVerticle) {//当判定为抽屉拖动才进入
let pos = this.pos;
this.visible = pos > width * 3 / 5 //当前位置如果大于总宽度的3/5就判定为全部展开抽屉，否则将抽屉弹回隐藏
