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

Question

我尝试做的是在点击时缩放图像，这个想法是：

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

我想不出更好的方式来缩放＆＃34;点击图片，但要在模态对话框中打开图片（如果有更简单的方法，请告诉我。）

代码：

 <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
    }
  }