el-dialog 点开后背景是灰色，但是点击屏幕两次以后就又显示了

最新推荐文章于 2024-01-29 22:58:07 发布

m0_52611940

最新推荐文章于 2024-01-29 22:58:07 发布

阅读量179

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_52611940/article/details/132563314

版权

添加这个属性就好了:modal-append-to-body="false"

<template>
  <el-dialog
    title="照片预览"
    :visible.sync="dialogVisible"
    class="imgDialog"
  <template>
  <el-dialog
    title="照片预览"
    :visible.sync="dialogVisible"
    class="imgDialog"
    :modal-append-to-body="false"
  >
    <img width="100%" :src="dialogImageUrl" alt="" />
  </el-dialog>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    openDialog(bool, file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped lang="less">
.imgDialog {
  .el-dialog__header {
    padding: 15px 20px !important;
    line-height: 18px !important;
  }
}
</style>

  >
    <img width="100%" :src="dialogImageUrl" alt="" />
  </el-dialog>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    openDialog(bool, file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped lang="less">
.imgDialog {
  .el-dialog__header {
    padding: 15px 20px !important;
    line-height: 18px !important;
  }
}
</style>