Question

当我单击缩略图时，我想在图片中显示文本，并且编写了一种执行类似操作的方法，但是我不知道为什么我的文本无法显示在我的网站上。因为我在JS中创建了一个方法来显示缩略图下的文本，所以我在JS的模板部分中调用了此函数。你能帮我吗？

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)" @click="activateText(index)">
                    <img :src="image.thumb">
                </div>
            </div>
            <div class="containe-carousel">

            <div class="photoshop-screenshot">                
            <img :src="currentImage"  alt="">
            </div>
            <div class="card-img">
                <img :src="currentImage2" alt="">

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

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

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

        currentText (){
            return this.texts[this.activeText].text;
        }

    },

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

    methods: {     
        activateImage(imageIndex) {
            this.activeImage = imageIndex;
        },  

        activeText (imageIndex){
            this.activeText = imageIndex;
        }
    },

    props: ['images', 'texts']
})





    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    images: [

                        {
                            id: '1',
                            big: '/images/keyboard1/photoshop-profile.PNG',
                            big2: '/images/keyboard1/photoshop-screenshot.png',
                            text : 'photo 1',
                            thumb: '/images/keyboard1/photoshop-logo.jpg'
                        },
                        {
                            id: '2',
                            big: '/images/keyboard2/autocad-profile.png',
                            big2: '/images/keyboard2/autocad-screenshot.png',
                            text : 'photo 2',
                            thumb: '/images/keyboard2/autocad-logo.png'
                        },
                        {
                            id: '3',
                            big: '/images/keyboard3/counterstrike-profile.png',
                            big2: '/images/keyboard3/counterstrike-screenshot.jpg',
                            thumb: '/images/keyboard3/counterstrike-logo.png'
                        },
                        {
                            id: '4',
                            big: '/images/keyboard4/leagueoflegends-profile.png',
                            big2: '/images/keyboard4/leagueoflegends-screenshot.png',
                            thumb: '/images/keyboard4/leagueoflegends-logo.jpg'
                        }
                    ]
                }
            }
        });
    </script>

CSS：

.section{
    background-color: black;
}

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


.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;

}

Answer 1

首先，您不需要在props对象中输入文字，并且重复了@click事件，我从您的代码中清除了不必要的部分：

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"/>
                    <caption>{{image.text}}</caption>
                </div>
            </div>
            <div class="containe-carousel">
          
            <div class="photoshop-screenshot">                
            <img :src="currentImage.big"  alt="">
                    <caption> {{currentImage.text}}</caption>

            </div>
            <div class="card-img">
                <img :src="currentImage2.big2" alt="">
                    <caption> {{currentImage2.text}}</caption>

            </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']
})

有demo和source code，我只是使用了单个文件组件，但这没关系

单击图像缩略图时如何显示带有图片的文本？

1 个答案: