vue.js - 如何将图像 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。

附言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>