项目小记-----遮罩

闭眼打键盘

于 2024-04-19 08:59:02 发布

阅读量108

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/a870017443/article/details/137949454

版权

本文介绍了如何使用JavaScript创建一个可控制显示和隐藏的遮罩层组件，通过`Mask`类定义了构造函数、zIndex属性以及点击事件处理，展示了如何实例化并调用方法来显示和移除遮罩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 遮罩
export class Mask {
  //          层数，$vm(this)，控制弹窗显示的值
  constructor(zIndex = 999, that = null, visible ='') {
    this.zIndex = zIndex;
    this.mask = document.createElement('div')
    this.mask.style.cssText = `position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); z-index: ${this.zIndex};`;
    this.mask.addEventListener('click', function() {
      if (visible) {
        that[visible] = false
      } 
    })
  }
 
  show() {
    document.body.appendChild(this.mask);
    document.body.style.overflow = 'hidden';
  }
 
  remove() {
    this.mask.remove();
    document.body.style.overflow = '';
  }
}


使用
const mask = new Mask(99999,$vm,'visible')
mask.show() // 显示遮罩
mask.remove()