drag过程中鼠标离开tab区域松开鼠标后无法取消drag事件

[lykiao]

如果tab下方无网页内容时，是能正常取消drag（触发dragend）的，但正常使用时下方肯定会存在webview或iframe， 此时由于在webview或iframe中mouseup后，tab获取不到此事件，导致一直处于dragging中（必须鼠标返回tab区域点击才会触发dragend），可否给个强制dragend的开关呢？ 看demo中tab下方有内容时，也能再现此现象（如图：）

[viewweiwu]

确实如此，需要优化下

[viewweiwu]

因为 iframe 无法触发 mouseup 事件，所以可以这样干

<vue-tabs-chrome @dragstart="handleStart" @dragend="handleEnd" />

export default {
  methods: {
    handleStart () {
      document.querySelector('iframe').style['pointer-events'] = 'none'
    },
    handleEnd () {
      document.querySelector('iframe').style['pointer-events'] = 'auto'
    }
  }
}

[lykiao]

@viewweiwu 反应太迅速了，非常感谢~ 因为我没直接用iframe，用的electron的webview做的web浏览器，所以需要参照此例改造一下，有时间试成功了贴出来哈~

[lykiao]

只需要把这两行这么写就行，太棒了，丝滑流畅，非常感谢~！！ handleStart (){ webview.shadowRoot.querySelector('iframe').style['pointer-events'] = 'none'; }, handleEnd () { webview.shadowRoot.querySelector('iframe').style['pointer-events'] = 'auto'; }

[lykiao]

@viewweiwu 经过验证，因为有时在tab click时只会触发dragStart事件，所以设置为none的操作不能在dragStart中处理，目前放到了dragging事件中，另外是会有漏掉设置auto的地方，需要单独打两个补丁，否则网页中的链接会失去点击事件。总结如下： 1：@dragging="handleDragging"、@dragend="handleDragEnd" handleDragging (){ webview.shadowRoot.querySelector('iframe').style['pointer-events'] = 'none'; }, handleEnd () { webview.shadowRoot.querySelector('iframe').style['pointer-events'] = 'auto'; } 2：@click="handleTabClick" handleTabClick () { webview.shadowRoot.querySelector('iframe').style['pointer-events'] = 'auto'; } 3：webview的preload中监听mouseup事件，通过ipc-message接收后处理： webview.shadowRoot.querySelector('iframe').style['pointer-events'] = 'auto';