vue.js点击图片放大浏览

<div id="app">
  <img :src="imageSrc" @click="showModal = true" alt="Clickable Image">
  <div v-if="showModal" class="modal">
    <span @click="showModal = false" class="close-button">&times;</span>
    <img :src="imageSrc" class="modal-content">
  </div>
</div>

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

const app = Vue.createApp({
  data() {
    return {
      imageSrc: 'path/to/your/image.jpg',
      showModal: false
    };
  }
});

app.mount('#app');

methods: {
  closeModal(event) {
    if (event.target.classList.contains('modal')) {
      this.showModal = false;
    }
  }
}