vue组件库之popup弹窗组件

业务背景

在作活动时常常须要实现各类各样的弹窗，有一些常见的问题须要处理，包含：

• 滑动穿透问题：滑动弹窗元素致使背景元素滚动
• 多弹窗层级问题：当有多弹窗时，最新的弹窗永远在最上层
• 出现/消失过渡动画

实现

已发布npm包欢迎使用反馈和star~

npm install jdc-popup -S
复制代码

github: github.com/jinglecjy/j…
demo: jinglecjy.github.io/jdc-popup/d…

滑动穿透问题

初始的解决方案

打开浮层时fixed底部元素，同时为了保持body的位置与打开浮层前一致，设置top偏移为当前scrollTop；
关闭浮层时恢复底部元素状态和滚动高度；

controlledBgScrolled() {
    let bgEle = document.getElementById('app');
    // 打开浮层
    if (this.showPopup) {
        let top = document.documentElement.scrollTop
          || window.pageYOffset
          || document.body.scrollTop;
        this.scrollTop = top;
        bgEle.style.position = 'fixed';
        bgEle.style.top = `-${top}px`;
        bgEle.style.height = '100%';
    } 
    else {
        bgEle.style.position = 'relative';
        bgEle.style.top = '';
        bgEle.style.height = '100%';
        document.documentElement.scrollTop = this.scrollTop; 
        window.pageYOffset = this.scrollTop;
        document.body.scrollTop = this.scrollTop;
    }
}
复制代码

这个方案的缺点是：

1. 打开/关闭弹窗瞬间，能够看到有闪动
2. 在APP内嵌页面，与APP原生有概率发生冲突

使用库实现

测试提出bug的时间比较紧急，因此直接引入了已有的库解决了该问题，通过测试，ios8+，android4.4+下没有发现问题。
库的源码比较清晰，以前的我的的思路都是想要一套代码兼容各端，这个库是将问题细分，对不一样端进行了不一样的处理，更容易去兼容。这三种方案都没法完美兼容全部端，详细能够查看参考[2]。

PC端

PC端实现比较简单，经过在body设置overflow: hidden就OK了。

const $body = document.querySelector('body')
const bodyStyle = { ...$body.style }
const scrollBarWidth = window.innerWidth - document.body.clientWidth
// 打开浮层时
$body.style.overflow = 'hidden'
$body.style.boxSizing = 'border-box'
$body.style.paddingRight = `${scrollBarWidth}px`
// 关闭浮层时，恢复原始设置
['overflow', 'boxSizing', 'paddingRight']
.forEach((x: OverflowHiddenPcStyleType) => {
    $body.style[x] = bodyStyle[x] || ''
}
复制代码

Android端

Android端的实现与我的的方案思路基本一致，打开弹层时将底部元素fixed并设置top偏移，关闭浮层时恢复现场，注意到底部元素必须同时设置html和body。

const scrollTop = $html.scrollTop || $body.scrollTop
const htmlStyle = { ...$html.style }
const bodyStyle = { ...$body.style }

// 打开浮层时，fixed底部
$html.style.height = '100%'
$html.style.overflow = 'hidden'
$body.style.top = `-${scrollTop}px`
$body.style.width = '100%'
$body.style.height = 'auto'
$body.style.position = 'fixed'
$body.style.overflow = 'hidden'

// 关闭浮层时，恢复现场
$html.style.height = htmlStyle.height || ''
$html.style.overflow = htmlStyle.overflow || ''
['top', 'width', 'height', 'overflow', 'position']
.forEach((x: OverflowHiddenMobileStyleType) => {
  $body.style[x] = bodyStyle[x] || ''
})

window.scrollTo(0, scrollTop)
复制代码

iOS端

iOS端在打开浮层时，禁用了底部的touchmove事件，若是弹窗内部元素须要可滚动，则经过另外的函数自行处理。关闭浮层时移除全部事件监听。经测试，该方案在Android下弹窗滚动到边界时，底部元素有概率出现滚动。该库在iPhone 6p下初次打开没法滚动。

/*** 打开浮层时,处理浮层和底部元素的滚动事件 ***/
// 1. targetElement为须要滚动的元素容器，处理其滚动
if (targetElement && lockedElements.indexOf(targetElement) === -1) {
    targetElement.ontouchstart = (event) => {
        initialClientY = event.targetTouches[0].clientY
    }
    targetElement.ontouchmove = (event) => {
        if (event.targetTouches.length !== 1) return
        // 手动处理滚动
        handleScroll(event, targetElement)
    }
    // 记录可滚动元素
    lockedElements.push(targetElement)
}
const handleScroll = (event, targetElement) => {
    const clientY = event.targetTouches[0].clientY - initialClientY
    if (targetElement) {
        const { scrollTop, scrollHeight, clientHeight } = targetElement
        // 向上滚动时 且 已经到达顶部
        const isOnTop = clientY > 0 && scrollTop === 0
        // 当向下滚动 且 已经到达底部
        const isOnBottom = clientY < 0
                          && scrollTop + clientHeight + 1 >= scrollHeight
        if (isOnTop || isOnBottom) {
            return preventDefault(event)
        }
    }
    event.stopPropagation()
    return true
}

// 2. 禁止document的touchMove事件
if (!documentListenerAdded) {
    document.addEventListener(
      'touchmove',
      preventDefault,
      eventListenerOptions)
    documentListenerAdded = true
}
/*** 关闭浮层时，移除时间监听 ***/
if (targetElement) {
    const index = lockedElements.indexOf(targetElement)
    if (index !== -1) {
        targetElement.ontouchmove = null
        targetElement.ontouchstart = null
        lockedElements.splice(index, 1)
    }
}
if (documentListenerAdded) {
    document.removeEventListener(
      'touchmove',
      preventDefault,
      eventListenerOptions)
    documentListenerAdded = false
}
复制代码

ui组件库都是怎么实现的？

用库能够较好的完成这个需求，可是对于滑动穿透这样的小问题，每次都引入库解决有点小题大作。基于上述考虑，选取了京东的nutui/有赞的vant/饿了么的mintui对比其实现方案，对好比下：

组件库	实现思路	实现形式
vant	touch事件处理	mixins，抽取了复杂复用逻辑
mint	touch事件处理	mixins，抽取了复杂逻辑，但实现方案上依赖组件结构，复用性不强
nut	fixed底层背景	组件内部函数，简洁易读，复用性不强

对比了一下三个方案，并实际测试（iOS8+/Android4+），仍是没法兼容全部机型，最终的仍是按照库的基本思路包装了一下组件。
另外加入overscroll-behavior虽然兼容性不佳，可是安卓原生浏览器和chrome浏览器仍然有部分支持。

// 对于半透明蒙层阻止滚动
mask.addEventListener(
  'touchmove', 
  this.preventDefault,
  { capture: false, passive: false },
  false);
// 对可滚动元素容器手动处理滚动
onTouchMove(event, targetElement) {
    ...
    if (targetElement) {
        const {
            scrollTop,
            scrollHeight,
            clientHeight
        } = targetElement
        // 向上滚动时 且 已经到达顶部
        const isOnTop = this.deltaY > 0 && scrollTop === 0
        // 当向下滚动 且 已经到达底部
        const isOnBottom = this.deltaY < 0
                          && scrollTop + clientHeight + 1 >= scrollHeight
        if (isOnTop || isOnBottom) {
            this.preventDefault(event)
        }
    }
    event.stopPropagation()
    return true
}
// 关闭弹窗时，移除全部事件
...
复制代码

多弹窗层级问题

当先后打开两个弹窗，用户的预期是按照打开的前后顺序，越后打开的弹窗在越上层，简而言之就是新弹窗永远在最上层。能够经过记录当前出现过的最大zIndex，新弹窗zIndex = zIndex+1。 另外滑动穿透问题在多弹窗状况下也须要处理，对于非当前最高层级弹窗，不该当收到滚动影响。

this.$el.style.zIndex = context.zIndex + 1; 
context.zIndex += 1;
复制代码

扩展

业务上的弹窗样式通常比较复杂，若是只是简单通用的弹窗样式，想要解决滑动穿透问题，能够经过Vue.extend扩展，将弹窗组件直接挂载到document下（element-ui中就使用了相似的作法），不会和主体内容互相影响，调用起来也更加灵活。

参考

[1] tua-scroll-body-lock：tuateam.github.io/tua-body-sc…
[2] 滑动穿透(锁body)终极探索]：juejin.im/post/5ca481…
[3] vant-popup]：blog.csdn.net/riddle1981/…
[4] NUTUI：github.com/jdf2e/nutui