el-loading 半透明遮罩下的元素不展示

Question

需求： 发送某个请求时，设置loding动画，loading半透明，可以看见遮罩下的其他元素

问题相关代码，请勿粘贴截图

async bindUserGroup() {
        if (!this.checkBindUserGroupform()) return
        const loading = this.$loading({
          lock: true,
          text: '请等待',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        await bindUserGroup(
          this.bindUserGroupform.groupCode,
          this.bindUserGroupform.PackageVersionFile
        )
          .then(res => {
            this.dialogVisible = false
            loading.close()
            this.$message({
              type: res.data.code === 0 ? 'success' : 'error',
              message: res.data.message
            })
            this.$router.push({
              path: '/views/synergy/userGroupManagerLogs',
              query: { groupCode: this.bindUserGroupform.groupCode }
            })
          })
          .catch(err => {
            this.dialogVisible = false
            loading.close()
            console.log(err)
          })
      },

运行结果及报错内容

可见遮罩下的元素都不见了，

这是正常无遮罩的页面元素

很好奇为什么会出现这种问题，该怎么解决

Answer 1

题主你好哈 你可以打开控制台看看dom元素结构 是整体没有在dom树上 还是因为遮罩层的某种css样式影响了dom的呈现