vue 画廊一屏多图轮播

组件代码

<template>
    <!-- 
        自定义画廊插件
    -->
    <div :ref="tid"> 
      <el-carousel :height=" (height+20)+'px'">
        <el-carousel-item v-for="(item,index) in list_group" :key="index">
            <div class="f-img-area"> 
                <el-image :src="item1" class="f-img"  v-for="(item1,index1) in item" :style="'height:'+height+'px;width:'+width+'px;'" :key="index1" :preview-src-list="[item1]" :append-to-body="true"/>
            </div>
        </el-carousel-item>
      </el-carousel>
    </div>
</template>
<script> 
import {uuid} from "@/plugins/fw-util-uuid.js" ;
export default {
    props: {
        list: {
            type: Array,
            default: []
        },
        height:{
            type:Number,
            default:150
        },
        width:{
            type:Number,
            default :200
        }
    },
    data() {
        return {
            list_group:[],
            tid: 'fw_img_view_'+uuid(),
        }
    },
    mounted(){
        this.init() ;
    },
    methods:{
       init(){ 
            var ref = this.$refs[this.tid] ;
            var width = ref.offsetWidth ; 

            var maxCount = Math.round( width / this.width ) ;

            if(this.list.length>maxCount){
                var a= Math.round( this.list.length/maxCount) ; 
                for(var i=0;i<a ;i++){
                    var arr1 = this.list.slice(i*maxCount ,(i+1)*maxCount)
                    this.list_group.push(arr1) ;
                }
            }else{
                this.list_group.push(this.list);
            } 
       }
    }
}
</script>
<style scoped>
.f-img-area{ 
    text-align: center;
}
.f-img{  
    display: inline-block;
    margin: 10px 0px;
    margin-right: 5px;
}
</style>

引用组件

<template>
    <div class="f-content">
        <fwImgView :list="list" /> 
        <fwImgView :list="list" :width="300" :height="200"/> 
        <fwImgView :list="list" :width="400" :height="300"/> 
    </div>
</template>
<script>
import fwImgView from "../../components/fw-img-view/index.vue"
export default {
    components: { fwImgView },
    data() {
        return {
             list:['/static/default.jpg','/static/default.jpg','/static/bg1.jpeg','/static/default.jpg','/static/bg1.jpeg','/static/default.jpg','/static/default.jpg','/static/default.jpg','/static/default.jpg','/static/default.jpg','/static/bg1.jpeg','/static/default.jpg','/static/default.jpg',]
        }
    },
    mounted() {

    },
    methods: {
    }
}
</script>
<style scoped>
.f-content {
    height: calc(100vh - 30px);
    margin: 2px;
}
</style>

效果预览