Vue 封装可向左向右查看图片列表的组件

实现了图片列表展示的功能，一次性可查看4张图，可向左向右点击查看，代码如下：

index.vue：

<template>
    <div class="content-container">
        <div class="content-container-item content">
            <!-- 使用transition加过渡效果 -->
            <transition-group tag="div" class="content-inner" name="list" mode="out-in">
                <!-- 图片列表封装成组件，以便扩展 -->
                <pic-list v-for="item in showPicList" :key="item.code" :picItem="item.picList"></pic-list>
            </transition-group>
        </div>
        <!-- 向左点击查看图片按钮 -->
        <div class="content-container-item icon-container left-icon-container">
            <div @click="prevStation" class="shuffling-btn prev"></div>
        </div>
        <!-- 向右点击查看图片按钮 -->
        <div class="content-container-item icon-container right-icon-container">
            <div @click="nextStation" class="shuffling-btn next"></div>
        </div>
    </div>
</template>

<script>
    import picList from './pic-list';
    export default {
        name: 'pictureContainer',
        data() {
            return {
                showPicList: [{
                    code: 1,
                    picList: './1.jpg'
                },
                {
                    code: 2,
                    picList: './2.jpg'
                },
                 {
                    code: 3,
                    picList: './3.jpg'
                },
                 {
                    code: 4,
                    picList: './4.jpg'
                },
               {
                    code: 5,
                    picList: './5.jpg'
                },
                {
                    code: 6,
                    picList: './6.jpg'
                },
                 {
                    code: 7,
                    picList: './7.jpg'
                },
                {
                    code: 8,
                    picList: './8.jpg'
                }],
                watchList: [],    //图片列表list
                showListIndex: 0,    //当前页面显示的第一个图片列表在watchList中的位置
            }
        },
        components: {
            picList
        },
        mounted() {
            //加载图片列表
            this.getWatchList();
        },
        methods: {
            /**
             * @description 获取可视范围图片列表
             */
            getWatchList() {
                this.watchList = this.showPicList;
                if(this.watchList.length <= 4) {
                    this.showPicList = this.watchList;
                } else {
                    this.showPicList = this.watchList.slice(0, 4);
                }
            },
            /**
             * @description 向右点击事件
             */
            nextStation() {
                if((this.showListIndex + 4) < this.watchList.length) {
                    this.showPicList = this.watchList.slice(++this.showListIndex, this.showListIndex + 4);
                } else {
                    utils.showAlert('右侧已无数据');
                }
            },
            /**
             * @description 向左点击事件
             */
            prevStation() {
                if(this.showListIndex > 0) {
                    this.showPicList = this.watchList.slice(--this.showListIndex, this.showListIndex + 4);
                } else {
                    utils.showAlert('左侧已无数据');
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @icon-container- .3rem;
    @title-background: #35393E;
    
    .content-container {
        width: 100%;
        height: 1.3rem;
        background: @title-background;
        .icon-container {
            width: @icon-container-width;
            max-width: @icon-container-width;
        }
        .left-icon-container {
            margin-left: -100%;
        }
        .right-icon-container {
            margin-left: @icon-container-width;
            &:after {
                display: block;
                content: '';
                clear: both;
                height: 0;
                line-height: 0;
                visibility: hidden;
            }
         }
        .content-container-item {
            float: left;
            height: 100%;
            position: relative;
            .shuffling-btn {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -.25rem;
                margin-top: -.25rem;
                cursor: pointer;
                width: .5rem;
                height: .5rem;
                border-radius: .5rem;
            }
            .prev {
                background: url(./prev.png) no-repeat;
            }
            .next {
                background: url(./next.png) no-repeat;
            }
        }
        .content {
            width: 100%;
        }
        .content-inner {
            margin: 0 @icon-container-width;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            height: 100%;
            justify-content: center;
            .list-enter-active, .list-leave-active {
                transition: opacity 2s ease-in-out;
            }
            .list-leave, .list-enter {
                opacity: 0;
            }
        }
    }
</style>

子组件 pic-list.vue：

<template>
    <div class="main" @click.stop="clickItem(item)">
        <div :style="{backgroundImage: 'url(' + item + ')'}"></div>
     </div>
</template>

<script type="text/ecmascript-6">
    /**
     * @description 图片列表切换子组件，传递单个item即可
     */

    export default {
        name: 'picList',
        props: {
            item: {
                type： Object,
                default: () => ({})
            }
        },
        methods: {
            /**
             * @description 点击图片列表事件
             */
            clickItem(item) {
                this.$emit('showPicture', item);
            }
        }
    }
</script>

<style scoped lang="less">
    @base-line-height: .4rem;
    @item-background-color: #303438;

    .main {
        margin: 2% .1rem;
        width: 25%;
        min-width: 1rem;
        height: 1rem;
        color: @item-background-color;
    
        &>div {
            width: 100%;
            height: 100%;
            background-size: 100%;
            background-repeat: no-repeat;
        }
    }
</style>