vue项目通过点击按钮给页面加上遮罩层效果

奋斗者格洛古

已于 2023-08-25 15:42:59 修改

阅读量2.4k

点赞数 3

文章标签： vue.js javascript 前端

于 2023-07-13 10:15:42 首次发布

本文链接：https://blog.csdn.net/m0_57005111/article/details/131696382

版权

点击关闭按钮时给主页面加上一个遮罩层，可以使用JavaScript来监听关闭按钮的点击事件，并在事件处理程序中添加遮罩层的样式

<template>
  <div>
    <button @click="toggleMask">关闭</button>
    <button @click="toggleMask">打开</button>
    <div v-if="showMask" class="mask"></div>
    <div class="content">
      主页面内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMask: false
    };
  },
  methods: {
    toggleMask() {
      this.showMask = !this.showMask;
    }
  }
};
</script>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
//透过遮罩层进行按钮点击
  pointer-events: none;
}

.content {
  /* 主页面样式 */
}
</style>

在上述代码中，我们使用Vue组件来实现关闭按钮、打开按钮和遮罩层。showMask变量用于控制遮罩层的显示与隐藏。在toggleMask方法中，我们通过切换showMask变量的值来控制遮罩层的显示与隐藏。在模板中，我们使用v-if指令来根据showMask变量的值来决定是否显示遮罩层。在样式中，我们使用.mask类来定义遮罩层的样式。要透过遮罩层去点击按钮，你可以使用CSS的pointer-events属性来控制遮罩层是否接收鼠标事件；

如果觉得有用，请点赞收藏，谢谢