(Vue.js) Я хочу, чтобы изображение 1 всплыло, когда я нажимаю на изображение 1, и я хочу, чтобы изображение 2 всплыло, когда я нажимаю на изображение 2 - PullRequest
Новая
       41

(Vue.js) Я хочу, чтобы изображение 1 всплыло, когда я нажимаю на изображение 1, и я хочу, чтобы изображение 2 всплыло, когда я нажимаю на изображение 2

1 голос
/ 19 сентября 2019

Есть несколько изображений.Я хочу, чтобы изображение 1 всплыло, когда я нажимаю на изображение 1, и я хочу, чтобы изображение 2 всплыло, когда я нажимаю на изображение 2. Могу ли я решить эту проблему, используя индекс в классе?

Карусель.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>

Ответы [ 2 ]

0 голосов
/ 20 сентября 2019

Вы можете создать новые данные из вашей 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>

Пример скрипки здесь

Примечание. Для управления изображением клика вы можете заключить миниатюру в элемент div.

0 голосов
/ 20 сентября 2019

У Vue есть нечто удивительное, Слоты;о котором вы можете прочитать о здесь .Помимо слотов, мы также будем использовать нечто, называемое роутер-линк, которое визуализируется как тег <a>, который вы также можете прочитать о здесь .

Что я бы предложил сделать,создать новый компонент, который называется что-то вроде ImageButton.Внутри этого компонента мы будем использовать то, что было упомянуто ранее: 

<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 более подробно описаны здесь здесь .

...