底部弹框出现之后，滑动阴影部分时，禁止阴影底部内容滑动，允许弹出框的内容滑动

最新推荐文章于 2024-05-21 23:21:19 发布

给生活比个耶～

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量338

点赞数 7

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_47984774/article/details/136698786

版权

一、实现思路主要是，通过动态的移除 .stop-scroll 这个类来实现content元素中的overflow:auto ----> overflow:hidden

举个例子，代码如下：

<div class="content">
    <!-- title列表start -->
    <div class="titles">
      <div
        class="item"
        v-for="item in titleList"
        :key="item.id"
        @click="popTitle(item)"
      >
        {{ item.title }}
      </div>
    </div>
    <!-- title列表end -->

    <!-- 弹窗start -->
    <div class="pop" v-show="isShow">
      <div class="top">
        <div class="tip">选择的态度是</div>
      </div>
      <div class="text">
        <div class="value">{{ val }}</div>
        <div class="addtion">
          <span>附加语句：</span>
          <div class="words">
            不焦虑 不躺平 不内卷 热爱生活 向光而行~ 不焦虑 不躺平 不内卷
            热爱生活 向光而行~ 不焦虑 不躺平 不内卷 热爱生活 向光而行~
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗end -->

    <!-- 遮罩层start -->
    <div class="shade" v-show="isShow" @click="close"></div>
    <!-- 遮罩层end -->
  </div>

<script setup lang="ts">
import { ref } from 'vue';
const titleList = [
  { id: 1, title: '小明有七块钱，花掉了两块，求太阳的质量' },
  { id: 2, title: '保持年轻的最好办法就是：多吃蔬菜多运动，外加谎报年龄' },
  { id: 3, title: '很内向，和别人聊天都要打100遍草稿' },
  { id: 4, title: '智者悦己，愚者悦人' },
  { id: 5, title: '生活不止眼前的枸杞，还有乒乓球、螺蛳粉巴拉巴拉....' },
];
const isShow = ref(false);
const val = ref('');
const popTitle = (item: any) => {
  isShow.value = true;
  val.value = item.title;
  stopScroll();
};
// 禁止遮罩层滑动
const stopScroll = () => {
  const el = document.getElementsByClassName('content')[0];
  el.classList.toggle('stop-scroll');
};
// 移除滑动
const removeScroll = () => {
  const el = document.getElementsByClassName('content')[0];
  el.classList.toggle('stop-scroll');
};
// 关闭遮罩层
const close = () => {
  isShow.value = false;
  removeScroll();
};
</script>

<style scoped lan="scss">
.stop-scroll {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.content {
  .item {
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 28px;
    line-height: 40px;
    color: #fff;
    padding: 40px 20px;
    margin: 15px;
    border: 1px solid #eee;
    font-weight: 700;
    border-radius: 8px;
  }
}
.shade {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
}
.pop {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 0;
  left: 0;
  max-height: 200px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
  z-index: 101;
  background-color: #fff;
  .top {
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.7);
  }
  .text {
    flex: 1;
    overflow-y: auto;
    .value {
      padding: 20px;
      margin: 20px;
      border: 1px solid #eee;
      border-radius: 8px;
      line-height: 30px;
    }
    .addtion {
      margin: 0 20px;
      span {
        font-weight: 700;
        font-size: 19px;
      }
    }
    .words {
      font-size: 18px;
      line-height: 30px;
    }
  }
}
</style>