jhbigscreen/src/pages/engin/enginImageItems.vue

<template>
    <div class="engin-image-items">
        <div class="tool-bar">
            <span class="sp-page" @click="goNextPage(-1)" v-if="images.length>5" >&lt;</span>            
            <span v-for="(it, idx) in pagers" :key="idx" class="sp-page" @click="goPage(it)" :class="it == index + 1 ? 'active' : ''"
                v-if="it <= images.length">{{ it }}</span>
            <span class="sp-page" @click="goNextPage(1)" v-if="images.length>5">&gt;</span>
        </div>
        <div class="div-img">
            <span class="sp-border sp-1"></span>
            <span class="sp-border sp-2"></span>
            <span class="sp-border sp-3"></span>
            <span class="sp-border sp-4"></span>
            <el-image :preview-src-list="images.map(it => it.imageFile)" :src="getImage()">
            </el-image>
        </div>
        <div class="div-desc">
            <el-popover placement="bottom" width="200" trigger="hover" :content="getTitle()">
                <div class="div-title" slot="reference">{{ getTitle() }} {{ images.length }}</div>
            </el-popover>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        images: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            pages: [1, 2, 3, 4, 5],
            index: 0
        };
    },

    mounted() {

    },
    computed:{
        pagers() {
        const pagerCount = 5;
        const halfPagerCount = (pagerCount - 1) / 2;

        const currentPage = this.index;
        const pageCount = this.images.length;

        let showPrevMore = false;
        let showNextMore = false;


        if (pageCount > pagerCount) {
          if (currentPage > pagerCount - halfPagerCount) {
            showPrevMore = true;
          }

          if (currentPage < pageCount - halfPagerCount) {
            showNextMore = true;
          }
        }

        const array = [];

        if (showPrevMore && !showNextMore) {
          const startPage = pageCount - (pagerCount - 2);
          for (let i = startPage; i <=pageCount; i++) {
            array.push(i);
          }
        } else if (!showPrevMore && showNextMore) {
          for (let i = 1; i < pagerCount; i++) {
            array.push(i);
          }
        } else if (showPrevMore && showNextMore) {
          const offset = Math.floor(pagerCount / 2) - 1;
          for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
            array.push(i);
          }
        } else {
          for (let i = 1; i <=pageCount; i++) {
            array.push(i);
          }
        }

        this.showPrevMore = showPrevMore;
        this.showNextMore = showNextMore;

        return array;
      }    
    },
    methods: {
        goNextPage(o){
            if(this.images.length==0){
                return;
            }
            let n=this.index+o;
            if(n<0){
                n=this.images.length-1;                
            }
            if(n>=this.images.length){
                n=0;
            }
            this.index=n;
        },
        goPage(o){
            if(this.images.length==0){
                return;
            }
            this.index=o-1;
        },
        getTitle() {
            if (this.images.length > 0) {
                return this.images[this.index].standardDesc;
            }
            return "";
        },
        getImage() {
            if (this.images.length > 0) {
                return this.images[this.index].imageFile + '.1000.jpg';
            }
            return "";
        }
    },
};
</script>

<style lang="less" scoped>
.engin-image-items {
    height: calc(100% - 36px);
    margin-left: 5px;
    width: calc(100% - 10px);
    margin-top: 10px;
    text-align: center;

    .tool-bar {
        position: absolute;
        right: 25px;
        top: 13px;

        .sp-page {
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #73ABD7;
            border-radius: 10px;
            margin-right: 4px;
            cursor: pointer;

            &.active {
                background-color: #fff;
                color: #004D7C;
            }
        }
    }

    .div-img {
        height: calc(100% - 40px);
        position: relative;
        display: inline-block;
        border: solid 1px #004D7C;

        .sp-border {
            position: absolute;
            display: inline-block;
            width: 30px;
            height: 30px;
            z-index: 1;

            &.sp-1 {
                top: -1px;
                left: -1px;
                border-left: solid 1px #62F6F8;
                border-top: solid 1px #62F6F8;
            }

            &.sp-2 {
                top: -1px;
                right: -1px;
                border-right: solid 1px #62F6F8;
                border-top: solid 1px #62F6F8;
            }

            &.sp-3 {
                bottom: -1px;
                right: -1px;
                border-right: solid 1px #62F6F8;
                border-bottom: solid 1px #62F6F8;
            }

            &.sp-4 {
                bottom: -1px;
                left: -1px;
                border-left: solid 1px #62F6F8;
                border-bottom: solid 1px #62F6F8;
            }
        }
    }

    /deep/ .el-image {
        height: 100%;
    }

    .div-desc {
        margin-top: 4px;

        &>span {
            display: flex;

            /deep/ .el-popover__reference-wrapper {
                display: flex;
                width: 100%;
                justify-content: center;

                .div-title {
                    max-width: 80%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }

    }

}</style>