<div class="drawer-layout">
  <!--抽屜-->
  <div class="drawer-wrap">
    <slot name="drawer"></slot>
  </div>
  <!--主容器-->
  <div class="content-wrap">
    <!--遮罩-->
    <div class="drawer-mask"></div>
    <slot name="content"></slot>
  </div>
</div>

let isTouch = 'ontouchstart' in window;
  let mouseEvents = isTouch ?
    {
      down: 'touchstart',
      move: 'touchmove',
      up: 'touchend',
      over: 'touchstart',
      out: 'touchend'
    } :
    {
      down: 'mousedown',
      move: 'mousemove',
      up: 'mouseup',
      over: 'mouseover',
      out: 'mouseout'
    };

document.addEventListener(mouseEvents.down, initDrag, false);

let startX, nowX, startPos;

const initDrag = function (e) {
  startX = e.clientX || e.changedTouches[0].clientX; //記錄手指按下的位置
  startPos = this.pos; //記錄drawer的上次位置
  document.addEventListener(mouseEvents.move, drag, false);
  document.addEventListener(mouseEvents.up, removeDrag, false);
}.bind(this);
const drag = function (e) {
  nowX = e.clientX || e.changedTouches[0].clientX; //滑動(dòng)中手指的位置x坐標(biāo)
  let pos = startPos + nowX - startX; 
  pos = Math.min(width, pos); //不能超過滑動(dòng)最大值
  pos = Math.max(0, pos); //不能小于0
  this.pos = pos; //設(shè)置滾動(dòng)距離為拖動(dòng)的距離
}.bind(this);

if (isVerticle === undefined) isVerticle = Math.abs(nowY - startY) / Math.abs(nowX - startX) > (Math.sqrt(3) / 3);

.moving
  transition transform .3s ease

<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>

const removeDrag = function (e) {
  if (isVerticle !== undefined) {
    if (!isVerticle) {//當(dāng)判定為抽屜拖動(dòng)才進(jìn)入
      let pos = this.pos;
      this.visible = pos > width * 3 / 5 //當(dāng)前位置如果大于總寬度的3/5就判定為全部展開抽屜，否則將抽屜彈回隱藏
      if (this.pos > 0 && this.pos < width) this.moving = true;//如果位置已經(jīng)處于最小值或最大值處，不需要有動(dòng)畫效果了
    }
    this.pos = this.visible ? width : 0;
  }
  if (!this.moving) {
    this.willChange = false; //留個(gè)懸念
  }
  isVerticle = undefined;
  //取消touchmove和touchend事件綁定
  document.removeEventListener(mouseEvents.move, drag, false);
  document.removeEventListener(mouseEvents.up, removeDrag, false);
}.bind(this);

const initDrag = function (e) {
  //...
  this.willChange = true;
}.bind(this);

const supportsPassive = (() => {
  let supportsPassive = false;
  try {
    const opts = Object.defineProperty({}, 'passive', {
      get: function () {
        supportsPassive = true;
      }
    });
    window.addEventListener("test", null, opts);
  } catch (e) {
  }
  return supportsPassive;
})();

document.addEventListener(mouseEvents.move, drag, supportsPassive ? {passive: true} : false);