如何将图像 src 传递到 Vue 中的模态对话框（以缩放单击的图像）？

Question

我想要做的是在点击时缩放图像，想法是：

• 你点击一张图片
• 对话框会width=85vw打开您刚刚在其中单击的图像（因此图像现在几乎全屏显示）

我想不出更好的方法来“缩放”单击图像，而是在模式对话框中打开它（如果有更简单的方法，请告诉我）。

代码：

 <v-dialog v-model="dialog" max-width="85vw" >
     <img :src="img1" alt="" width="100%" @click.stop="dialog=false">
 </v-dialog>
                
 <img :src="img1" width="500px"  @click.stop="dialog = true">
 <img :src="img2" width="500px"  @click.stop="dialog = true">
 <img :src="img3" width="500px"  @click.stop="dialog = true">

 export default {
     data() {
         img1: "../../src/assets/pexels-photo-373912.jpg",
         img2: "../../src/assets/pexels-photo-373912.jpg",
         img3: "../../src/assets/pexels-photo-373912.jpg"
     }
 }

问题是，它没有在对话框中打开任何点击的图像，只是你在那里硬编码的图像，在这个例子中，img1无论你点击什么图像，它都会打开。

我不知道如何将:src动态传递到对话框中 -:src您单击的图像的 。

PS v-dialog 是 Vuetify.js 库中的一个组件

---

题：

• 有没有明显更好的方法呢？
• 如果不是真的，我如何使这个方法起作用并显示我在模态对话框中单击的图像？

Answer 1

您需要一个变量来保存选择的图像。当您单击图像时，它应该将变量设置为该图像的 url。当您单击对话框图像时，它应该取消设置变量。

该对话框应该在设置变量时显示，否则隐藏。

为简单起见，我没有使用实际的对话框，只是一个 div。看起来您会将它用于对话框v-model而不是使用v-if我使用的。

new Vue({
  el: '#app',
  data: {
    selectedImage: null,
    images: [
      'http://via.placeholder.com/400x300?text=image%201',
      'http://via.placeholder.com/600x400?text=image%202',
      'http://via.placeholder.com/500x500?text=image%203'
    ]
  },
  methods: {
    zoom(url) {
      console.log("Zoom", url);
      this.selectedImage = url;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-if="selectedImage" max-width="85vw">
    <img :src="selectedImage" alt="" width="100%" @click.stop="selectedImage = null">
    <hr>
  </div>

  <div v-for="url in images">
    <img :src="url" width="100px" @click="zoom(url)">
  </div>
</div>