javascript - 在 CSS 和 Vue 中将非事件缩略图显示为灰色

Question

当我单击缩略图时，我希望它以彩色显示，而其他缩略图显示为灰色。所以当你点击一个缩略图时，为了说明我想让缩略图是彩色的，而其他缩略图是灰色的，因为它们是不活动的。

这是我想要实现的:

Vue.component('carousel', {
    template: `
        <div class="card-carousel" >
            <div class="thumbnails">
                <div 
                    v-for="(image, index) in  images"
                    :key="image.id"
                    :class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
                    @click="activateImage(index)">
                    <img :src="image.thumb"/>
                   
                </div>
            </div>
            <div class="containe-carousel">

                <span> {{currentImage.text}}</span>
            <div class="photoshop-screenshot">                
            <img :src="currentImage.big"  alt="">
                    
            </div>
            <div class="card-img">
                <img :src="currentImage2.big2" alt="">
                   

            </div>
            </div>
        </div>
    `,
    computed: {

        currentImage() {
            return this.images[this.activeImage];
        },

        currentImage2() {
            return this.images[this.activeImage];
        }
     
    },

        data() {
            return {
                activeImage: 0,
            
            }
        },

        methods: {     
            activateImage(imageIndex) {
                this.activeImage = imageIndex;
            },  
            
        
        },
    
        props: ['images']
    });

.section{
    background-color: black;
}

.card-carousel {
    user-select: none;
    position: relative;
}

.containe-carousel {
    padding-top: 5%;
}

.thumbnails {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;

}

.thumbnail-image {
    display: fixed;
    align-items: center;
    cursor: pointer;
    padding: 2px;

}

.thumbnail-image > img {
    width: 100%;
    height: auto;
    transition: all 250ms;
    filter:  grayscale(100%);

}

.thumbnail-image:selected> img {
    box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
    visibility: hidden;
    filter: none;
}


.card-img {
    position: relative;
}

 .card-img > img {
    margin: 0 auto;
    padding-top: 7%;
    z-index: 2; 
}

 .photoshop-screenshot {
    position:absolute;
    z-index: 1;
    width: 70%;
    right:-80px;
    bottom:-130px;
   
}


.containe-carousel span {
    
    color: white;
    font-weight: bold;
    box-shadow: -0.3125em 0.3125em 0 0 rgba(0, 0, 0, 0.15);
}

                 
        <section class="section" id="app">
            <div class="container">
                <div class="text-center" style="margin:0px 50px">
                    <div class="heading-underscore">
                        <h2 class="dk-5q-color">
                             <?php say("X50Q-dashboard-title"); ?>
                         </h2> 
                    </div>
                    
                </div>
                <div class="columns">
                     <div class="column "> 
                        <div class="card-content">
                            <carousel
                                :starting-image="0"
                                :show-progress-bar="true"
                                :images="images"     
                            ></carousel>
                    
                        </div>   
                    </div> 
                </div>
            </div>            
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    
<script src ="/x/x50q-rgb-mechanical-keyboard/x50q-cloud-js.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() { 
                
                return {
                    images: [
                       
                        {
                            text : 'Photoshop',
                            id: '1',
                            big: '/images/das-keyboard-x50q/photoshop-profile.PNG',
                            big2: '/images/das-keyboard-x50q/photoshop-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/photoshop-logo.jpg'
                        },
                        {
                            text : 'Aurocad',
                            id: '2',
                            big: '/images/das-keyboard-x50q/autocad-profile.png',
                            big2: '/images/das-keyboard-x50q/autocad-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/autocad-logo.png'
                        },
                        {
                            text : ' Counter-Strike',
                            id: '3',
                            big: '/images/das-keyboard-x50q/counterstrike-profile.png',
                            big2: '/images/das-keyboard-x50q/counterstrike-screenshot.jpg',
                            thumb: '/images/das-keyboard-x50q/counterstrike-logo.png'
                        },
                        {
                            text : 'League of Legends',
                            id: '4',
                            big: '/images/das-keyboard-x50q/leagueoflegends-profile.png',
                            big2: '/images/das-keyboard-x50q/leagueoflegends-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/leagueoflegends-logo.jpg'
                        }
                    ],
                    
                
                }
            }
        });
    </script>

Answer 1

我会将过滤器从 .thumbnails 旋转到 .thumbnail-image>img 并将 filter: none; 添加到 .thumbnail-image:active>img

您的 CSS 应如下所示:

.thumbnails {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  }

.thumbnail-image {
  display: fixed;
  align-items: center;
  cursor: pointer;
  padding: 2px;
  }

.thumbnail-image>img {
  width: 100%;
  height: auto;
  transition: all 250ms;
  filter: grayscale(100%);
  }

.thumbnail-image:active>img {
  box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  filter: none;
  }

问题是，当您将灰度滤镜添加到类 thumbnails 的容器中时，您实际上是在覆盖可能已在其中设置的任何内容。如果你想影响缩略图，你应该尽可能具体，这就是为什么 .thumbnail-image>img 是你的主要目标。此外，当您单击缩略图时，您需要撤消此更改，因此 .thumbnail-image:active>img 是您的覆盖。