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

P.S。 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>

Answer 2

点击整个页面分布的图像定义一个属性并用点击事件改变它

在模板中

 <v-dialog v-model="dialog" max-width="60%" @keydown.esc="cancel">
      <v-card>
        <v-img :src="pic" alt="" contain/>
      </v-card>
    </v-dialog>
  <v-img
      src="require(@/assets/clinic/1.jpeg)"
      alt=""
      contain
      @click="openPic(require('@/assets/clinic/1.jpeg'))"//this part is important you have to require image
   />

在脚本中

data() {
    return {
      pic: "",
      dialog: false
    }
  },
  methods: {
    openPic(image) {
      this.dialog = true
      this.pic = image
    },
    cancel() {
      this.dialog = false
    }
  }

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

How to pass an image src into a modal dialog in Vue (in order to zoom the clicked image)?

vue.js

vue-component

vuejs2

vuetify.js

代码：

问题：