vue 画廊一屏多图轮播

本文主要是介绍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>

效果预览