如果一个页面上有多个 drawer 怎么玩？ eq. 左右各一个

[zongmekeneng]

如果一个页面上有多个 drawer 怎么玩？ eq. 左右各一个

[hjl19911127]

这位大哥，多个drawer总不能同时都启用吧？

[hjl19911127]

这个组件的事件是注册在容器内部的

[hjl19911127]

兄弟还有啥问题吗，没问题的话我先关了

[Azhjie]

兄弟，我也搭车同问，我就一个content，我想从左划和从右都有对应的菜单弹出，看了你的展示demo，没有这一块的应用

[hjl19911127]

肯定一个开启的时候，另一个不能同时支持滑动的吧？通过enable可以控制是否允许拖拽

[Azhjie]

类似这个效果，奈何我公司的产品太奇葩呀

[Azhjie]

<template>
  <div>
    <div class="xxx">
      <span @click="revese =false">left</span>
      <span  @click="revese =true">right</span>
    </div>
    <vue-drawer-layout :reverse="revese">
    <div class="drawer" slot="drawer">
      <div class="text">This is drawer</div>
    </div>
    <div class="content" slot="content">
      <div class="text">This is content.</div>
    </div>
  </vue-drawer-layout>
  </div>
</template>

 const drag =  (event) => {
        t1 = t2
        t2 = +new Date()
        lastX = nowX
        nowX = supportsTouch ? event.changedTouches[0].clientX : event.clientX
        nowY = supportsTouch ? event.changedTouches[0].clientY : event.clientY
        speed = [1, -1][+this.reverse] * (nowX - lastX) / (t2 - t1)
        let pos = startPos + [1, -1][+this.reverse] * (nowX - startX)
// ...

把reverse换成实时从this获取就好用了，谢谢兄弟的开源。

[Azhjie]

slot drawer我另外改成动态组件就可以区分左右了

[hjl19911127]

感谢 @Azhjie 兄弟的例子，其实我想表达的也是类似的意思，你们需要一个开关控制左右抽屉是否开启，因为在drag区域重合的情况下，同一时间肯定只能触发一个drawer。
我的代码里写了这个逻辑

const container = this.$el
container.addEventListener(handledEvents.down, initDrag, supportsTouch && supportsPassive ? {passive: true} : false)

只有每个drawer的容器触发touchstart事件时，才能拖拽自己的drawer。
所以解决办法有两种：

• 通过开关切换
• 分隔容器区域（即可以分别触发其drawer的touchstart事件）

[hjl19911127]

发布了v1.1.0版本，支持外部切换reverse等等