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 click事件，将其链接到方法：

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

（vue.js）单击图像时，我想为每个图像调用一个模态

1 个答案: