（vue.js）点击图片时，我想为每张图片调用一个模态

Question

点击图片时，我想为每张图片调用一个模态。

目前有 3 张图片，点击图片会弹出一个没有内容的模式。

我的目录如下所示：

组件

ㅡ普通

ㅡㅡModal.vue

ㅡContent.vue

ㅡDetail.vue

App.vue

data () {
    return {
      imgItems: [
        {
          thumbnail: require('./assets/imgs/aa.jpg'),
          description: 'aa'
        },
        {
          thumbnail: require('./assets/imgs/bb.jpg'),
          description: 'bb'
        },
        {
          thumbnail: require('./assets/imgs/cc.jpg'),
          description: 'cc'
        }
      ]
    }
  }

Content.vue

<template>
  <div class="container">
    <div class="gallery">
      <ul>
        <li v-for="(item, index) in items" :key="index">
          <img :src="item.thumbnail" class="gallery-image">
          {{ item.thumbnail }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: { type: Array, default: () => [] }
  }
}
</script>

我希望你能帮助我。谢谢！XD

Answer 1

在图片中，在标签处添加一个 v-on 点击​​事件，将其链接到一个方法：

 <img :src="item.thumbnail" class="gallery-image" @click="modalHandler">

你也可以这样做：

<img :src="item.thumbnail" class="gallery-image" @click="showModal = !showModal">

然后，您必须在数据类中添加一些新数据，以切换模式：

data () {
return {
  imgItems: [
    {
      thumbnail: require('./assets/imgs/aa.jpg'),
      description: 'aa'
    },
    {
      thumbnail: require('./assets/imgs/bb.jpg'),
      description: 'bb'
    },
    {
      thumbnail: require('./assets/imgs/cc.jpg'),
      description: 'cc'
    }
  ],
  showModal: false
}

}

然后，在您的 HTML 页面上，转到 MODAL 并使用 v-if 仅在 showModal = true 时呈现它

<modal v-if="showModal">