在vue3使用elmentplus的el-image预览图片如何调整其el-image-viewer__wrapper布局

在vue3中使用ElementPlus的el-image组件预览图片时，可以通过覆盖默认的CSS样式来调整其布局。

首先，在需要调整布局的组件中，引入ElementPlus的CSS文件：

<template>
  <div>
    <el-image :src="imageUrl" @click="preview"></el-image>
  </div>
</template>

<script>
import "element-plus/lib/theme-chalk/index.css";
import { ElImage, ElImageViewer } from "element-plus";

export default {
  components: {
    ElImage,
    ElImageViewer,
  },
  data() {
    return {
      imageUrl: "https://example.com/image.jpg",
    };
  },
  methods: {
    preview() {
      this.$refs.viewer.show();
    },
  },
};
</script>

然后，可以通过自定义的CSS样式来调整el-image-viewer__wrapper的布局，例如：

.el-image-viewer__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

这个样式会将图片居中显示。如果需要更多的布局调整，可以添加更多的自定义样式来实现。