vue项目中通过css完成遮罩层

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

---

一、html部分代码？

<div class="menu">
      <img
        v-if="!morePanelShow"
        class="more"
        @click="handleClickMore($event)"
        src="../assets/image/caidan.png"
      />
      <div class="more-panel" v-if="morePanelShow">
        <div class="more-panel-container">
          <img
            src="../assets/image/close.png"
            class="close"
            @click="handleClickClose"
          />
          <div v-for="(item, index) in fnList" :key="index" class="mp-item">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>

二、js部分代码

代码如下（示例）：

export default {
  data() {
    return {
      fnList: [
        { name: '公告' },
        { name: '登录' },
        { name: '注册' },
        { name: '手册' },
        { name: '交流' },
        { name: '日志' }
      ],
      morePanelShow: false
    }
  },
  created() {},
  mounted() {
    document.addEventListener('click', this.bodyCloseMenus)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.bodyCloseMenus)
  },
  methods: {
    bodyCloseMenus(e) {
      console.log(e)
      this.morePanelShow = false
    },
    handleClickMore(e) {
      e.stopPropagation()
      this.morePanelShow = true
    },
    handleClickClose(e) {
      e.stopPropagation()
      this.morePanelShow = false
    }
  }
}
</script>

三、css部分代码

代码如下（示例）：

.container {
  display: flex;
  align-items: center;

  .menu {
    height: 100%;
    display: flex;
    align-items: center;

    > img {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
  }

  .more-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    width: 260px;
    background: rgba(0, 0, 0, 0.4);
    padding: 0 40px;
    padding-top: 100px;
    display: flex;
    flex-direction: column;

    .more-panel-container {
      position: relative;

      .close {
        width: 20px;
        height: 20px;
        position: absolute;
        top: -63px;
        right: 0px;
        cursor: pointer;
      }

      .mp-item {
        height: 48px;
        line-height: 48px;
        width: 100%;
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        cursor: pointer;
      }
    }
  }
}

---