今天项目上用到个功能是点击按钮弹出一个 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>
)
