当我单击缩略图时，我希望它以彩色显示，而其他缩略图显示为灰色。 所以当你点击一个缩略图时，为了说明我想让缩略图是彩色的，而其他缩略图是灰色的，因为它们是不活动的。
这是我想要实现的:
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>最佳答案
我会将过滤器从 .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 是您的覆盖。
关于javascript - 在 CSS 和 Vue 中将非事件缩略图显示为灰色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52138013/