移动端弹出遮罩层时防止底部页面滚动

如果底部页面内容过多出现滚动条，此时弹出遮罩层后，在遮罩层滑动页面也会导致底部页面响应滚动操作

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

解决办法

1. 监听遮罩层的打开和关闭
   
   • 打开时设置底部页面的 position: fixed
   • 关闭时恢复默认布局 position: static

watch: {
  'popupVisible'(val) {
    if (val) {
      this.$refs.portal.style.position = 'fixed'
    } else {
      this.$refs.portal.style.position = 'static'
    }
  }
}