1、彈窗長度超出螢幕長度，讓body和置灰背景固定，彈窗可滑動

<template>
  <section>
    <header class="top-model">
      <span class="btn-rule tc" @click="goRule">活動規則</span>
    </header>
    <rule-pop v-if="ruleShow" @hide="hide"></rule-pop>
  </section>
</template>
複製程式碼

export default EventView.extend({
  data() {
    return {
      ruleShow: false
    };
  },
  components: {
    "rule-pop": RulePop
  },
  methods: {
    goRule() {
      this.ruleShow=true;

      document.body.setAttribute('class','noscroll')
    },
    hide() {
      this.ruleShow = false;
      document.body.setAttribute("class", "");
    }
  }
});
複製程式碼

2、彈窗簡短，居中

<template>
    <section class="rule-model">
        <div class="rule-mask">
            <div class="rule-wrap">
            </div>
        </div>
    </div>
</template>
複製程式碼

 .rule-mask{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    // align-items: center;
    justify-content: center;
    z-index: 8888;
    .rule-wrap{
      margin-top:remit(100);
      z-index:9999;
    }
複製程式碼