82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
|
|
Vue.component("roll-carousel", {
|
|
template: `
|
|
<div style="padding: 0px 30px;">
|
|
<el-carousel height="220px" indicator-position="outside" :interval="5000" :loop="true">
|
|
<el-carousel-item v-for="item in forData">
|
|
<el-row>
|
|
<el-col :span="4" style="padding:0 5px;" v-for="url in item" v-if="number == 6">
|
|
<el-image style="width: 200px; height: 200px" :src="url.photo_url"
|
|
fit="cover" @click="onClickImage(url)"></el-image>
|
|
<div style="width: 200px;text-align: center;position: absolute;bottom: 3px;height: 30px;
|
|
background: rgba(0,0,0,0.5);line-height: 30px;overflow: hidden;white-space:nowrap;
|
|
text-overflow:ellipsis;">{{url.photo_name}}</div>
|
|
</el-col>
|
|
<el-col :span="8" style="padding:0 5px;" v-for="url in item" v-if="number == 3">
|
|
<el-image style="width: 200px; height: 200px" :src="url.photo_url"
|
|
fit="cover" @click="onClickImage(url)"></el-image>
|
|
<div style="width: 200px;text-align: center;position: absolute;bottom: 2px;height: 30px;
|
|
background: rgba(0,0,0,0.5);line-height: 30px;overflow: hidden;white-space:nowrap;
|
|
text-overflow:ellipsis;">{{url.photo_name}}</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<roll-amplify-img :list="imgList" :url="imgUrl" :show="show" @show="onCloseImg"></roll-amplify-img>
|
|
</div>
|
|
`,
|
|
props: {
|
|
list:{
|
|
type:Array
|
|
},
|
|
number:{
|
|
type:Number
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show:false,
|
|
imgUrl:'',
|
|
forData:[],
|
|
imgList:[]
|
|
}
|
|
},
|
|
mounted(){
|
|
|
|
},
|
|
methods: {
|
|
init(){
|
|
var len = Math.ceil(this.list.length/this.number)
|
|
var maxArr = []
|
|
for (let i = 0; i < len ; i++) {
|
|
let minArr = []
|
|
for (let j = 0; j < this.number ; j++) {
|
|
if(this.list[(i*this.number)+j] != undefined){
|
|
minArr.push(this.list[(i*this.number)+j])
|
|
}
|
|
}
|
|
maxArr.push(minArr)
|
|
}
|
|
this.forData = maxArr
|
|
},
|
|
onClickImage(url){
|
|
var imgArr = []
|
|
this.list.forEach((x)=>{
|
|
imgArr.push(x.photo_url)
|
|
})
|
|
this.imgList = imgArr
|
|
this.imgUrl = url.photo_url
|
|
this.show = true
|
|
},
|
|
onCloseImg(e){
|
|
this.show = e
|
|
}
|
|
},
|
|
watch:{
|
|
list:function (o,n) {
|
|
this.init()
|
|
}
|
|
},
|
|
|
|
})
|