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

原文地址:https://www.cnblogs.com/minozMin/p/10552445.html

时间: 2024-09-29 16:53:36

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

js实现图片加载特效(从左到右,百叶窗,从中间到两边)

/* 网上百度的,感觉”从中间到两边“的效果写的不是很好,改了一下,感觉可以了!*/<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var image; var in

vue组件弹框过渡效果,如,点击显示为从左到右滑动,收回隐藏为从右到左滑动

vue组件 <transition name="carHistory"> <car-History-Line v-show="showHistoryLine" @closeHitsory='closeHitsory'></car-History-Line> </transition> css .carHistory-enter { animation: carHistory-dialog-fade-in 0.3s ea

vue封装一个简单的div框选时间的组件

记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框选实现 div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div.[注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位.不然,鼠标框选区域和被框选区域很难保持

在一个二维数组中,每一行都按照从左到右递增的顺序排序

/*  * 在一个二维数组中,  * 每一行都按照从左到右递增的顺序排序,  * 每一列都按照从上到下递增的顺序排序.  * 请完成一个函数,输入这样的一个二维数组和一个整数,  * 判断数组中是否含有该整数.  */ public static void main(String[] args) { int[][] array = {{1,2,3},{4,5,6},{7,8,9}}; System.out.println(Find2(1, array)); } /*  * 思路一:暴力遍历法  

48.输入任意正整数,编程判断该数是否为回文数(回文数是指从左到右读与从右到左读一样,如12321)

//1.输入一个数,将其每一位分离,并保存如一个数组 //2.判断数组最后录入的一位是第几位 //3.循环判断是否满足回问数的要求 #include<iostream> using namespace std; int main() { int n,temp; int k=0; int a[20]; cout<<"please input an number: "<<endl; cin>>n; for(int i=0;i<20;i+

【思想篇之爱左看右】

爱左看右 当年在挖掘特洛伊古城的时候一位英国考古学家发现了一面古铜镜,铜镜背后雕刻了一段古怪难懂的铭文,他穷尽毕生精力,请教了不少古希腊文专家,都无法破译其中的奥妙.    考古学家逝世后,这面镜子就静静地躺在大英博物馆里,直到20年后,有一天,博物馆里来了一个英俊的年轻人,在博物馆馆长的陪同下,他径直走到古镜的面前,在工作人员的协助的下打开玻璃柜,小心翼翼地取出铜镜,翻过来放在一块红色天鹅绒上.古镜背后的铭文在红色的背景上反射着冷冷的金色光泽. 年轻人从背囊里拿了一面普通的镜子出来,照着古铜镜

JavaScript基础 parseInt() 于字符串从左往右提取整数

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

左连接,右连接,内连接,外连接, join, left join, right join ,mysql ,oracle

2016-6-12 22:35:51 工作用了一年多的oracle,最近在学mysql, 仔细想想 各种连接,感觉这些概念还是蛮烦人的! 最近整理了一下,分享一下自己的理解,有些东西是借鉴网上并自己吸收了的. 1.不管是什么连接,oracle和mysql的原理是一模一样的,只是有些写法不一样而已.说到写法,这里提一下, select * from A, B where a.filed1=b.filed2; --这是第1种写法, 内连接,这样写,很方便, oracle和mysql通用 select

在一个每一行从左到右递增每一列从上到下递增的二维数组中查找一个整数是否存在——3

给定一个二维数组,数组的特点是:每一行从左到右数据大小依次递增,每一列数据从上到下依次递增,要求判断一个整数是否在这个二维数组中: 设计二维数组如下: 首先,毋庸置疑的的是,遍历一遍数组肯定能判断出来,这也是最笨的方法了,因此,要想提高程序的运行效率就得找出一种高效的方法来查找: 一开始的想法大概都能想到从数组第一行第一列的数开始沿着对角线判断,如果是对角线数据就可以直接返回,比如我们要想查找17这个数,这时候17比0.9.16都要大,因此以0.9.16为对角线的矩形数据就可以排除了,接下来判断