Это работает, но я думаю, что это побеждает цель использования фреймворка - PullRequest
Новая
       1

Это работает, но я думаю, что это побеждает цель использования фреймворка

1 голос
/ 28 июня 2019

Я очень новичок в использовании vue и js, и я создал фотогалерею. Я хочу уменьшить непрозрачность выбранных фотографий, а затем сбросить их при смене фотографий, код работает, но я чувствую, что это можно сделать лучше. Я выбираю элементы dom в своих элементах функции changeImage (), которые мне не нравятся. Могу ли я сделать это без выбора dom? Кажется, если бы все было просто, я просто не могу понять это. 

<template>
<div class="container">
  <div class="main_image">
    <img class = "current" :src="activeImage">
  </div>
  <div  class="images">
    <img  v-for="(image,index) in imageSrcs" v-bind:key="index" v-bind:src="image" @click="changeImage" class = "pics">

  </div>
</div>
</template>

<script>
import { setTimeout } from 'timers';

export default {
  name: 'Gallery',
  data () {
    return {
      activeImage: '../assets/house1.jpeg',
      imageSrcs:['../assets/house1.jpeg','../assets/sail.jpeg','../assets/castel.jpeg','../assets/train.jpeg','../assets/house3.jpeg','../assets/house2.jpeg',],
    }
  },
  methods:{
    changeImage: function(e){
      const pics = document.querySelectorAll('.pics')
      const current = document.querySelector('.current');

      pics.forEach((pic)=>{
        pic.style.opacity = 1;
      })

    this.activeImage = e.target.src

    current.classList.add('fadeIn');

    setTimeout(()=>{
      current.classList.remove('fadeIn');
    },550)



    e.target.style.opacity = .5;
    }

  }
}
</script>


<style scoped>
@keyframes fadeIn{
  to{
    opacity: 1;
  }
}

.fadeIn{
opacity: 0;
animation: fadeIn 500ms ease-in;

}

.main_image img{
  height: 400px;
  width: 100%;
}

.container{
margin: 0 auto;
max-width: 760px;
}

.images{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3px;
overflow: hidden;

}

.images img{
  height: 150px;
  width: 100%
}
</style>

1 Ответ

1 голос
/ 28 июня 2019

Довольно упрощенный подход, использующий реактивные привязки Vue.js, заключается в том, чтобы динамически устанавливать класс CSS при нажатии на изображение. 

<img  
        v-for="(image,index) in imageSrcs" 
        v-bind:key="index" 
        v-bind:src="image" 
        @click="changeImage(index)" 
        :class="image == activeImage ? 'selected' : ''"
    >

И ваш метод для обработки щелчка может просто установить activeImage prop. 

methods: {
    changeImage: function(i) {
      this.activeImage = this.imageSrcs[i];
    }
  }

И класс CSS для применения непрозрачности 

<style scoped>
.selected {
  opacity: 0.5;
}
<style>
...