vue3+element-plus如何实现图片右上方有个×图标点击图标就会让图片消失代码+注释

需要使用Element Plus中的ElImage组件和ElButton组件，以及Vue3中的ref和reactive。

1. 在Vue3中引入ref和reactive：

import { ref, reactive } from 'vue'

2. 创建一个data对象来存储图片是否显示的状态：

data() {
  return {
    imgShow: true
  }
}

3. 在template中使用ElImage组件和ElButton组件，并将图片是否显示的状态绑定到ElImage组件的v-if指令：

<template>
  <div>
    <el-image
      v-if="imgShow"
      src="https://picsum.photos/id/237/200/300"
      fit="cover"
      :preview-src-list="[]"
    ></el-image>
    <el-button
      icon="el-icon-close"
      circle
      @click="imgShow = false"
      v-if="imgShow"
      class="close-btn"
    ></el-button>
  </div>
</template>

4. 在style中添加一些样式来让关闭按钮浮动在图片的右上角：

<style>
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>

完整代码如下：

<template>
  <div>
    <el-image
      v-if="imgShow"
      src="https://picsum.photos/id/237/200/300"
      fit="cover"
      :preview-src-list="[]"
    ></el-image>
    <el-button
      icon="el-icon-close"
      circle
      @click="imgShow = false"
      v-if="imgShow"
      class="close-btn"
    ></el-button>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'ImageDemo',
  setup() {
    const imgShow = ref(true)

    return {
      imgShow
    }
  }
}
</script>

<style>
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
``