vue可内容可滚动弹窗2

（）

在index.vue页面中弹出弹窗

<template >
  <div @click.stop="clickDetails">
    <span>点击弹出弹窗</span>
    <!-- 弹窗-->
    <ActivityRules
      v-show="isRulesShow"
      :show="isRulesShow"
      @closeModal="closeModal"
      :dataList="dataList"
      :height="7"
    >
    </ActivityRules>
  </div>
</template>

<script>
import ActivityRules from './ActivityRules'
export default {
  name: 'Aindex',
  components: { ActivityRules },
  data () {
    return {
      isRulesShow: false,
      dataList: {
        title: '标题',
        rules: [
          '1.小标题1',
          '红红火火恍恍惚惚或或或或或或或或或或或或或或或胡哈哈哈哈或',
          '2.小标题2',
          '啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿啦啦啦啦啦啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿啦啦啦啦啦啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿啦啦啦啦啦',
          '3.小标题3',
          '红红火火恍恍惚惚或或或或或或或胡哈哈哈哈红红火火恍恍惚惚或',
        ],
      },
    }
  },
  methods: {
    //点击弹出弹窗
    clickDetails () {
      this.isRulesShow = true
    },
    //关闭弹窗
    closeModal () {
      console.log('点击关闭')
      this.isRulesShow = false
    },
  }
}
</script>

ActivityRules.vue弹窗页面

<template>
  <van-dialog class="dialog" v-model="show" :showConfirmButton="false">
    <div class="content" :style="`height: ${height}rem`">
      <div class="title">{{ dataList.title }}</div>
      <div class="privacy">
        <p v-for="(item, index) in dataList.rules" :key="index">
          {{ item }}
        </p>
      </div>
      <div class="footer">
        <span class="know" @click="closeModal">我知道了</span>
      </div>
    </div>
  </van-dialog>
</template>

<script>
import Vue from 'vue';
import { Dialog } from "vant";
Vue.use(Dialog)
import { resize } from '@/utils/resize';
import "@/utils/rem"
export default {
  name: 'ActivityRules',
  components: { Dialog },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Object,
      default: {}
    },
    height: {
      type: Number,
      default: 6
    }
  },
  created () {
    resize()
  },
  methods: {
    closeModal () {
      console.log('关闭')
      this.$emit('closeModal')
    },
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  width: unset;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .content {
    width: 6rem;
    padding: 0.5rem 0.42rem 0rem 0.4rem;
    position: relative;
    margin: 0 auto;
    .privacy {
      height: 4.5rem;
      overflow-y: scroll;
      p:last-child {
        padding-bottom: 0.3rem;
      }
      p:nth-child(odd) {
        margin-top: 10px;
      }
    }
    .title {
      font-size: 0.34rem;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: bold;
      text-align: center;
      color: #282828;
      margin-bottom: 0.4rem;
    }
    p {
      font-size: 0.28rem;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #666666;
      margin: 0;
    }
  }
  .footer {
    position: absolute;
    bottom: 0rem;
    width: 100%;
    height: 1rem;
    border-radius: 4px;
    background: #fff;
    margin-right: 10px;
  }
  .know {
    position: absolute;
    bottom: 0.3rem;
    // left: 0.18rem;
    width: 6rem;
    height: 0.8rem;
    border-radius: 4px;
    background: #1283ff;
    text-align: center;
    line-height: 0.76rem;
    font-size: 0.32rem;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #ffffff;
  }
}
.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;
}
</style>

在src文件夹里面建resize.js

resize.js文件夹

export function resize () {
  var htmlEle = document.documentElement;
  var htmlWidth = window.innerWidth;
  if (!htmlWidth) return;
  if (htmlWidth >= 750) {
    htmlEle.style.fontSize = '100px';
  } else {
    htmlEle.style.fontSize = 100 * (htmlWidth / 750) + 'px';
  }
}

在src文件夹里面建rem.js

在rem.js

window.onload = function () {
  getRem(750, 100)
};
window.onresize = function () {
  getRem(750, 100)
};
function getRem (pwidth, prem) {
  var html = document.getElementsByTagName("html")[0];
  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
  html.style.fontSize = oWidth / pwidth * prem + "px";
}
window.addEventListener('resize', () => { getRem(750, 100) });
window.addEventListener('onload', () => { getRem(750, 100) });

接口弹出框里面内容滚动，背景下的body也滚动问题：

方法一：

在main.js里面加：

//弹出框禁止滑动
Vue.prototype.noScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false, { passive: false })// 禁止页面滑动
}

//弹出框可以滑动
Vue.prototype.canScroll = function () {
  var mo = function (e) {
    e.preventDefault()
  }
  

在页面中使用：
 watch: {
    isRulesShow (v) {
      if (v) {
        //禁止主页面滑动方法在main.js
        this.noScroll()
      } else {
        //主页面可滑动
        this.canScroll()
      }
    },
  },

方法二：使用vuex，以下三步

在store.js里面

import Vuex from "vuex";
import Utils from './utils/Utils';
import Vue from "vue";

const store = new Vuex.Store({
  state: {
     noScroll: false,
    }
  mutations: {
     //弹出弹窗时，背景下的body不滚动
    noScroll (state, noScroll) {
         state.noScroll = !!noScroll;
      },
    }
})

export default store;

在 App.vue里面注入

<template>
  <div id="app" class="general-phone">
    <router-view />
  </div>
</template>

<script>

export default {
  computed: {
    noScroll () {
      return this.$store.state.noScroll;
    },
  },
  watch: {
    noScroll () {
      if (this.noScroll) {
        document.documentElement.classList.add('stop-scroll');
      } else {
        document.documentElement.classList.remove('stop-scroll');
      }
    }
  },
}
</script>

使用：

//点击按钮弹出弹窗
methods: {
    clickDetails () {
      this.$store.commit('noScroll', true); //弹出弹窗后只能弹窗内容滚动不让body滚动
      this.isRulesShow = true
    },
    closeModal () {
      this.$store.commit('noScroll', false);
    },
},
//销毁的时候再让body恢复滚动
 destroyed () {
    this.$store.commit('noScroll', false);
  },