弹出层设计

移动端-自定义弹出层-禁用滑动 - 图1Vue代码组织如下：

  1. <template>
  2.   <div class="modal-container" v-if="show" @click="hideModal">
  3.     <div class="modal-view">
  4.       <div v-if="pure">
  5.         <span :class="iconClass"></span>
  6.         <span class="title global-short-text">{{title}}</span>
  7.         <div class="content global-short-text">{{content}}</div>
  8.       </div>
  9.       <slot></slot>
  10.     </div>
  11.     <div class="mask"></div>
  12.   </div>
  13. </template>
  15. <script>
  16. import { eventBus } from '../utils';
  17. let htmlDom, bodyDom;
  18. export default {
  19.   data() {
  20.     return {
  21.       show: false,
  22.       title: "title",
  23.       content: "content",
  24.       pure: true,
  25.       success: true
  26.     }
  27.   },
  28.   mounted() {
  29.     eventBus.$on("showModal", this.showModal);
  30.     eventBus.$on("hideModal", this.hideModal);
  31.     htmlDom = document.getElementsByTagName("html")[0];
  32.     bodyDom = document.getElementsByTagName("body")[0];
  33.   },
  34.   beforeDestroy() {
  35.     htmlDom = null;
  36.     bodyDom = null;
  37.   },
  38.   computed: {
  39.     iconClass: function (params) {
  40.       return this.success ? 'iconfont iconsuccess modal-icon-success' : 'iconfont iconfail modal-icon-fail'
  41.     }
  42.   },
  43.   methods: {
  44.     showModal: function ({ title, content, pure = true, success = true }) {
  45.       this.show = true;
  46.       this.pure = pure;
  47.       this.title = title;
  48.       this.content = content;
  49.       this.success = success;
  50.       window.scrollTo(0, 0);
  51.       htmlDom.style.overflow = "hidden";
  52.       bodyDom.style.overflow = "hidden";
  53.       htmlDom.style.position = "fixed";
  54.       bodyDom.style.position = "fixed";
  55.       eventBus.$emit("banIframeScroll", "no"); //弹框出现的同时禁止滑动
  57.     },
  58.     hideModal: function () {
  59.       this.show = false;
  60.       htmlDom.style.overflowX = "hidden";
  61.       htmlDom.style.overflowY = "scroll";
  62.       bodyDom.style.overflowX = "hidden";
  63.       bodyDom.style.overflowY = "scroll";
  64.       htmlDom.style.position = "";
  65.       bodyDom.style.position = "";
  66.       eventBus.$emit("banIframeScroll", "auto"); //弹框出现的同时禁止滑动
  67.     },
  68.     noscroll: function (e) {
  69.       e.preventDefault();
  70.     }
  71.   }
  72. }
  73. </script>
  75. <style>
  76. .modal-container {
  77.   z-index: 999999;
  78.   position: absolute;
  79.   width: 100%;
  80.   height: 100%;
  81.   display: flex;
  82.   justify-content: center;
  83.   align-items: center;
  84.   overflow: hidden;
  85. }
  86. .mask {
  87.   position: absolute;
  88.   width: 100%;
  89.   height: 100%;
  90.   background-color: black;
  91.   opacity: 0.8;
  92.   overflow: hidden;
  93. }
  94. .modal-view {
  95.   z-index: 999999;
  96.   width: 80%;
  97.   min-height: 200px;
  98.   background-color: white;
  99.   text-align: center;
  100.   position: absolute;
  101.   top: 25%;
  102.   border-radius: 5px;
  103.   padding: 10px;
  104.   opacity: 1;
  105. }
  106. .title {
  107.   font-size: 28px;
  108. }
  109. .content {
  110.   font-size: 24px;
  111.   position: relative;
  112.   top: 40px;
  113. }
  114. .modal-icon-success {
  115.   font-size: 30px;
  116.   color: var(--global-color);
  117. }
  118. .modal-icon-fail {
  119.   font-size: 30px;
  120.   color: red;
  121. }
  122. </style>

基于事件触发弹出和隐藏，这样做的好处就是在整个DOM树上只要挂载一处，挂载一次即可。内不展示蓉蓉可以通过配置参数传递，也支持slot。

滑动问题

一开始，在谷歌浏览器上使用对body的样式修改overflow为”hidden”就可以实现弹出层下滑动禁用。但是在真机上测试的时候发现并没有用。
我怀疑是的overflow的问题，所以对也做了修改。这样android手机基本没有问题了，但是我们的基础页面内使用了