Vue implements scrollable pop-up window effect

<template lang="html">
    <div v-if="show" class="modal-bg" @click="closeModal">
      <div class="modal_con">
        <div class="modal_content">
          <div class="modal-container">
            <div class="modal_main">
              <p class="modal-header">{{dataList.title}}</p>
              <div class="rules_text">
                <p
                  v-for="(item, index) in dataList.rules"
                  class="rules_txt"
                  :key="index"
                >
                  {{ item }}
                </p>
              </div>
          </div>
        </div>
          <div class="footer_rules">
            <div class="tips"></div>
              <div class="rules_button">
                <div class="button" @click="closeModal">
                  <p class="button_text">I understand</p>
                </div>
              </div>
            </div>
        </div>
      </div>

    </div>
</template>

<script>
export default {
  name: 'Popup',
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dataList: {
        rules:
          '1. This is the first piece of data ahh ...
          '2. This is the second piece of data ahh ...
          '3. This is the third piece of data ahh ...
          '4. This is the fourth piece of data aa ...
        ],
        reward: [
          '1. Activity Rules Article 1 Data Data Data Data',
          '2. Activity Rules Article 2 Data Data Data',
          '2. Activity Rules Article 3 Data Data Data'
        ]

      }
    }
  },
  methods: {
    closeModal() {
      this.$emit('closeModal')
    },
  }
}
</script>

<style lang="css" scoped>
.modal_con {
  width: 80%;
  height: 287px;
  background: #ffffff;
  overflow: hidden;
  margin: 0 auto;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}
.modal_content {
  height: 100%;
  background-color: #fff;
}
.modal-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.modal-container {
  height: 78%;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  /* ios requires the following attribute*/
  -webkit-overflow-scrolling: touch;
}

.rules_txt {
  font-size: 15px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: justify;
  color: #666666;
  padding: 0 20px;
  margin-top: 8px;
  margin-bottom: 0;
}

.rules_txt:last-child {
  padding-bottom: 40px;
}
.modal-header {
  font-size: 17px;
  font-family: PingFang, PingFang-SC;
  font-weight: bold;
  text-align: center;
  color: #333333;
  margin: 0;
  padding-top: 20px;
}
.reward_title {
  font-size: 17px;
  font-family: PingFang, PingFang-SC;
  font-weight: bold;
  text-align: center;
  color: #333333;
  padding: 0;
  margin-top: 14px;
  margin-bottom: 6px;
}
.footer_rules {
  width: 100%;
  height: 22%;
  position: absolute;
  bottom: 0;
}
.tips {
  /* width: 100%;
  opacity: 0.6;
  height: 49px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #ffffff);
  text-align: center;
  line-height: 49px;
  font-size: 18px; */
}
.rules_button {
  width: 100%;
  background: #ffffff;
  padding-bottom: 20px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.button {
  width: 90%;
  display: flex;
  justify-content: center;
  align-content: center;
  background: linear-gradient(270deg, #1283ff, #50a3ff);
  border-radius: 4px;
  text-align: center;
  margin: 0 auto;
}
.button_text {
  font-size: 15px;
  font-family: PingFang, PingFang-SC;
  font-weight: SC;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 0;
  padding: 12px 0;
}
.rules_con {
  padding-bottom: 80px;
}
</style>

<!-- Event rules pop-up window-->
 <template>
<div>
 <div @click="clickPopup">
            <span>Click to pop up the pop-up window</span>
          </div>
 <Popup
      v-show="isRulesShow"
      @closeModal="isRulesShow = false"
      :show="isRulesShow"
    >
    </Popup>
</div>
</template>
<script>
import Popup from './Popup'
export default {
name:"Home",
components:
 Popup
},
data () {
    return {
      isRulesShow:flase
      }
    },
    watch:
    isRulesShow (v) {
      if (v) {
        //Disable the main page sliding method in main.js
        this.noScroll()
      } else {
        //The main page can slide this.canScroll()
      }
    },
  },
   methods:{
 //Activity rules pop-up window clickPopup () {
      this.isRulesShow = true
    },
 }
}
</script>
   <style lang="scss" scoped>
* {
  touch-action: pan-y;
}
</style>

//The pop-up box is prohibited from sliding Vue.prototype.noScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false,{ passive: false })// Disable page sliding}
 
//The pop-up box can slide Vue.prototype.canScroll = function () {
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// Scroll bar appears document.removeEventListener('touchmove', mo, false,{ passive: false })
}

//Disable the main page from sliding this.noScroll()
//The main page can slide this.canScroll()

//Add styles as well:
* {
  touch-action: pan-y;
}