组件代码
<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>
效果预览