Question

有几张图像。我想在单击图像1时弹出图像1，而在单击图像2时弹出图像2，可以使用类中的索引来解决它吗？

Carousel.vue

<template>
  <div v-for="(item, index) in items" :key="index">
    <img :src="item.thumbnail" />
    <button type="button" @click="imgClick()" :class="`img-index--${index}`">button-{{ index }}</button>
  </div>
  <Modal v-if="showModal" @close="showModal = false">
    <div slot="body" v-for="(item, index) in items" :key="index">
      <img :src="item.thumbnail" :class="`img-index--${index}`"/>
    </div>
  </Modal>
</template>

<script>
import Modal from './Modal.vue'
export default {
  props: {
    items: { type: Array, default: () => [] }
  },
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    imgClick() {
      this.showModal = !this.showModal;
    }
  },
  components: {
    Modal: Modal
  }
}
</script>

Answer 1

Vue有一个很棒的名字，Slots；您可以阅读有关here的内容。除了广告投放之外，我们还将使用称为“路由器链接”的东西，该链接呈现为<a>标签，您也可以阅读有关here的信息。

我建议做的是按照ImageButton的方式创建一个新的组件，叫做something。在该组件内部，我们将使用前面提到的内容：

<template>
    <router-link :to="route">
        <slot name="image" />
    </router-link>
</template>

<script>
export default {
    name: 'ImageButton',
    props: {
        route: { type: [String, Object], default: '' }
    }
};
</script>

现在，一旦有了这个，我们就需要为您的模态添加另一个组件-我将让您自己解决这个问题。然后，一旦router-link和modal有了正确的路线，您就可以在Carousel.vue中这样简单地调用它：

<image-button v-slot:image :route="'to_your_modal'">
     <img :src="'image'" />
</image-button>

让我知道您是否还有其他问题，Vue文档将进一步详细介绍here。

Answer 2

您可以通过items道具建立新数据，并为每个图像注入新属性show: false。

您不需要2个v-for这样的循环。您可以将Modal组件放在第一个循环中，而仅使用item.show来显示或不显示模态。

<template>
  <div>
    <div v-for="(item, index) in photos" :key="index">
      <div @click="imgClick(item)" style="cursor:pointer;>
        <img :src="item.thumbnail" />
      </div>
      <Modal v-if='item.show' @close="item.show = false">
        <div slot='body'>
          <img :src="item.thumbnail" :class="`img-index--${index}`"/>
        </div>        
      </Modal>
    </div>
  </div>
</template>

<script>
import Modal from './Modal.vue'
export default {
  props: {
    items: { type: Array, default: () => [] }
  },
  data() {
    return {
      photos: {}
    }
  },
  created() {
    this.photos = this.items.map(item => {
      return { ...item, show: false }
    })
  },
  methods: {
    imgClick(item) {
      item.show = true
    }
  },
  components: {
    Modal: Modal
  }
}
</script>

小提琴示例here

注意：您可以将缩略图包裹在div中以管理点击图像。

（Vue.js）我想使图像1在单击图像1时弹出，而我想使图像2在单击图像2时弹出

2 个答案: