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

Posted 2021-10-26 minozmin

  实现了图片列表展示的功能，一次性可查看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.showIndex, this.showListIndex + 4);
                } else {
                    utils.showAlert(‘右侧已无数据‘);
                }
            },
            /**
             * @description 向左点击事件
             */
            prevStation() {
                if(this.showListIndex > 0) {
                    this.showPicList = this.watchList.slice(--this.showIndex, this.showListIndex + 4);
                } else {
                    utils.showAlert(‘左侧已无数据‘);
                }
            }
        }
    }
</script>

 

 

子组件 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>