今天項目上用到個功能是點擊按鈕彈出一個 modal，有遮罩層而且在上面顯示圖片。

其實就是?el-dialog 的功能，但是?el-dialog 彈出后，有標簽關閉按鈕還有背景。

解決辦法：el-dialog 的 width 設為 0 就可以了。

<template><div><el-button type="text" @click="dialogVisible = true">打開 Dialog</el-button><el-dialogwidth="0"close-on-click-modal:show-close="false"center:append-to-body="true":visible.sync="dialogVisible"><el-avatarshape="square":size="100":src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-avatar></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false}}
}
</script><style lang="scss" scoped>
::v-deep div .el-dialog__header {padding: 0;
}
::v-deep div .el-dialog__body {padding: 0;
}
</style>

如果想設置彈出層圖片，根據圖片大小居中顯示，可以這么寫

<template><div><el-button type="text" @click="dialogVisible = true">打開 Dialog</el-button><el-dialogwidth="0"close-on-click-modal:show-close="false"center:visible.sync="dialogVisible"><imgsrc="https://img0.baidu.com/it/u=3245855693,488618434&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=517"/></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false,};},
};
</script><style lang="scss" scoped>
::v-deep div .el-dialog {margin: 0 !important;left: 50%;top: 50%;
}
::v-deep div .el-dialog__header {padding: 0;
}
::v-deep div .el-dialog__body {padding: 0;img {position: absolute;transform: translate(-50%, -50%);}
}
</style>

?