vue封装弹出框

最新推荐文章于 2024-08-07 21:53:27 发布

阿铭同学

最新推荐文章于 2024-08-07 21:53:27 发布

阅读量820

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/qq_37547964/article/details/125068795

版权

本文详细介绍了如何在 Vue.js 中封装一个弹出框组件，包括组件模板、样式和使用方法。组件包含遮罩层和内容区域，并提供了显示和隐藏模态框的功能。同时，当模态框打开和关闭时，实现了页面滚动的控制，确保用户体验。

摘要由CSDN通过智能技术生成

转载于： https://blog.csdn.net/qq_37547964/article/details/125068795

一、封装组件

<template>
  <!-- 遮罩层 -->
  <div v-show="isMask" class="mask"  @touchmove.stop @mousewheel.stop>
      <!-- 内容 -->
      <slot></slot>
 
  </div>
</template>

<script>
export default {
  props: {
    //   是否显示加载动画
    isMask: {
      type: Boolean,
      default: true
    }
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
align-items: center;
}
</style>

二、使用

<template>
  <div class="box">
    <eject :isMask="isMask">
      <div class="teacherDetails">
      </div>
    </eject>
  </div>
</template>

<script>
import eject from '@/components/mask'
export default {
  name: '',
  components: {
    eject
  },
  data() {
    return {
      isMask: true //是否显示模态框
    }
  },
  computed: {},
  watch: {
    isMask(newisMask, oldisMask) {
      // 当模态框打开时,阻止当前页面滚动,当模态框关闭时恢复滚动(不影响模态框中的元素滚动)
      if (newisMask) {
        this.stopMove()
      } else {
        this.StartMove()
      }
    }
  },
  created() {
    this.stopMove()
  },
  methods: {
    /**
     * @function 停止页面滚动(组件必须要这个)
     */
    stopMove() {
      let m = function(e) {
        e.preventDefault()
      }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', m, { passive: false }) //禁止页面滑动
    },
    /**
     * @function 开启页面滚动(组件必须要这个)
     */
    StartMove() {
      let m = function(e) {
        e.preventDefault()
      }
      document.body.style.overflow = '' //出现滚动条
      document.removeEventListener('touchmove', m, { passive: true })
    },
  },
}
</script>

<style scoped lang="less">
.teacherDetails {
  position: relative;
  box-sizing: border-box;
  width: 960px;
  height: 530px;
  background: #fff;
  border-radius: 10px;

}
</style>