qimall/addons/GroupBuy/backend/views/default/components/common/carousel-img/preview.php

<template id="carousel-img-preview">
    <div class="carousel-img-preview" :style="{background: computedStyle.searchBox}">
        <div flex="cross:center" style="height: 150px;overflow: hidden;" :style="{...computedStyle.spaceStyle, background: computedStyle.iptBg,}">
            <div class="img-one-setyle img-two-setyle" :class="{'img-three-setyle': searchData.buttonData.typeIndex == 1}"  v-if="searchData.buttonData && searchData.carouselImgArr">
                <!-- 图片位置 -->
                <el-image v-show="searchData.buttonData.typeIndex != 0" :style="{...inputStyle,'opacity':searchData.carouselImgArr.length>2?1:0,...marginStyle,...computedStyle.searchIpts}" :class="{'img-two': searchData.buttonData.typeIndex != 0}" :src="searchData.carouselImgArr.length>2?searchData.carouselImgArr[searchData.carouselImgArr.length-1].imgUrl:''">
                    <div slot="error" class="image-slot"></div>
                </el-image>
                <el-image :class="{'img-two': searchData.buttonData.typeIndex != 0}" :style="{...inputStyle,...marginStyle,...computedStyle.searchIpts}" :src="searchData.carouselImgArr[0].imgUrl"></el-image>
                <el-image v-show="searchData.buttonData.typeIndex != 0" :style="{...inputStyle,'opacity':searchData.carouselImgArr.length>1?1:0,...marginStyle,...computedStyle.searchIpts}" :class="{'img-two': searchData.buttonData.typeIndex != 0}" :src="searchData.carouselImgArr.length>1?searchData.carouselImgArr[1].imgUrl:''">
                    <div slot="error" class="image-slot"></div>
                </el-image>
                <div v-if="searchData.buttonPointData.open">
                    <div class="point-style" flex="" 
                         :class="{'point-style-left': searchData.pointSiteIndex == 0,'point-style-right': searchData.pointSiteIndex == 2,}"
                         v-if="searchData.buttonPointData && searchData.buttonPointData.pointIndex != 3">
                        <span class="point" 
                            :class="{
                                'point-sel': index == 0,
                                'point-two-sel': index == 0 && searchData.buttonPointData && searchData.buttonPointData.pointIndex == 1,
                                'point-three': searchData.buttonPointData && searchData.buttonPointData.pointIndex == 2,
                            }" 
                            v-for="(item,index) in searchData.carouselImgArr" :key="index"></span>
                    </div>
                    <div class="point-style point-num" v-else
                        :class="{'point-style-left': searchData.pointSiteIndex == 0,'point-style-right': searchData.pointSiteIndex == 2,}">
                            1 / {{searchData.carouselImgArr.length}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('carousel-img-preview', {
        name: "carousel-img-preview",
        template: '#carousel-img-preview',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        computed: {
            computedStyle() {
                return this.activeItem.computedStyle
            },
            searchData() {
                console.info(this.activeItem.data);
                return this.activeItem.data
            },
            inputStyle() {
                let tabItem = this.computedStyle.tabItem
                let style = {
                    'background': this.computedStyle.iptBg,
                }
                if (tabItem && tabItem.value == 'border') style.border = '1px solid ' + (tabItem ? tabItem.color : 'transparent')
                if (tabItem && tabItem.value == 'shandow') style.boxShadow = tabItem ? '0 0 10px ' + tabItem.color : '0 0 10px rgba(226, 231, 244, 0.7)'
                console.log(style);
                return style
            },
            marginStyle(){
                if(this.activeItem.data.spaceInfo && this.activeItem.data.buttonData.typeIndex != 0){
                    let marginVal = this.activeItem.data.spaceInfo[0].value;
                    marginVal = marginVal?marginVal/2:0;
                    let obj = {
                        'marginRight': marginVal + 'px',
                        'marginLeft': marginVal + 'px'
                    }
                    return obj;
                }
                return {};
            }
        },
        data() {
            return {}
        }
    });
</script>

<style>
    .carousel-img-preview {
        box-sizing: border-box;
        overflow: hidden;
    }

    .img-one-setyle{
        position: relative;
        height: 100%;
        width: 100%;
    }

    .img-two-setyle{
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .img-one-setyle .el-image{
        height: 100%;
    }

    /* .img-three-setyle .el-image{
        height: 80%;
    } */

    .img-three-setyle .el-image:nth-child(2n - 1){
        height: 80%;
    }

    .img-two{
        width: 70%;
        flex-shrink: 0;
        /* margin: 0 6px; */
    }

    .point-style{
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
    }

    .point-style-left{
        left: 10px;
        transform: translateX(0);
    }

    .point-style-right{
        right: 10px;
        left: auto;
        transform: translateX(0);
    }

    .point-style .point{
        display: inline-block;
        height: 6px;
        width: 6px;
        border-radius: 10px;
        background: #CCC;
        margin: 0 4px;
    }

    .point-style .point-three{
        height: 3px;
        width: 16px;
        border-radius: 0;
    }
    .point-style .point-sel{
        background: #FFF;
    }
    .point-style .point-two-sel{
        height: 6px;
        width: 14px;
        border-radius: 6px;
    }

    .point-num{
        display: inline-block;
        text-align: center;
        border-radius: 10px;
        background: rgba(0,0,0,.5);
        color: #fff;
        padding: 2px 6px;
    }


    .carousel-img-preview .el-carousel--horizontal{
        height: 100%;
        width: 100%;
    }
    
</style>