使用vue-preview實現縮略圖

1.項目中安裝組件

npm i vue-preview -S

2.main.js中引入插件,掛載到Vue

import VuePreview from 'vue-preview';
Vue.use(VuePreview);

3.在組件中使用,代碼如下(代碼中數據爲假數據,調後臺接口請在methods中自行添加代碼):

<!--縮略圖區域-->
<template>
    <div class="photoinfo-container">
        <div class="thumbs">
            <vue-preview :slides="list" class="imgPrev"></vue-preview>
        </div>
    </div>
</template>
<script>
    //listTmp中各字段含義:
    //src:縮略圖點開後圖片
    //msrc:縮略圖
    //w:縮略圖點開後的寬度
    //h:縮略圖點開後的高度
    var listTmp = [
        {
            src:"https://f12.baidu.com/it/u=1958490809,1691334580&fm=72",
            msrc:"https://f12.baidu.com/it/u=1958490809,1691334580&fm=72",
            w:600,
            h:400
        },
        {
            src:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=547934426,2187279168&fm=15&gp=0.jpg",
            msrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=547934426,2187279168&fm=15&gp=0.jpg",
            w:600,
            h:400
        },
        {
            src:"http://img.lanrentuku.com/img/allimg/1506/5-1506151506080-L.jpg",
            msrc:"http://img.lanrentuku.com/img/allimg/1506/5-1506151506080-L.jpg",
            w:600,
            h:400
        }
    ];
    export default {
        data(){
            return {
                list:listTmp//縮略圖的數組
            }
        },
        methods:{
            
        }
    }
</script>

<style lang="scss">
<!--樣式可以通過chrome的開發者工具,右鍵檢查點擊圖片進行查看html樣式的結構,style標籤中不要使用scoped-->
    .photoinfo-container{
        .thumbs{
            .imgPrev{
                .my-gallery{
                    figure{
                        display: inline-block;
                        margin: 8px;
                    }
                    img{
                        width: 80px;
                        height: 60px;
                    }
                }
            }
        }
    }
</style>

4.運行效果如圖: