<img src="your-image-url" @click="showImagePreview" />

<script>
export default {
  methods: {
    showImagePreview() {
      const image = new Image();
      image.src = this.imageUrl;
      image.onload = () => {
        // 創(chuàng)建彈出層
        const previewContainer = document.createElement('div');
        previewContainer.style.position = 'fixed';
        previewContainer.style.top = 0;
        previewContainer.style.bottom = 0;
        previewContainer.style.left = 0;
        previewContainer.style.right = 0;
        previewContainer.style.backgroundColor = 'rgba(0,0,0,0.8)';
        previewContainer.style.display = 'flex';
        previewContainer.style.justifyContent = 'center';
        previewContainer.style.alignItems = 'center';
        document.body.appendChild(previewContainer);
        // 在彈出層中添加圖片
        const previewImage = document.createElement('img');
        previewImage.src = this.imageUrl;
        previewImage.style.maxWidth = '80%';
        previewImage.style.maxHeight = '80%';
        previewContainer.appendChild(previewImage);
        // 點(diǎn)擊彈出層，關(guān)閉預(yù)覽
        previewContainer.addEventListener('click', () => {
          document.body.removeChild(previewContainer);
        });
      };
    }
  }
};
</script>