点击图片后产生的画廊在多个页面都有,所以可以定义公用组件,在src下创建新文件夹common、gallary以及Gallary.vue,并需要在webpack.base.conf.js设置别名,为了写路径的时候方便,记得重启项目。
关键点是轮播图的设置,v-for循环,以及添加点击banner和Gallary互相返回的事件。
注意点击gallary(画廊),返回banner的事件的函数内用到this.$emit,向外(banner)触发事件,且banner要接受。
banner的js:
<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
name: 'DetailBanner',
data() {
return {
showGallary: false,
imgs:["http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg","//img1.qunarzz.com/sight/p0/1605/9f/9f600a32f70a2d1290.water.jpg_600x330_0beeee99.jpg"]
}
},
methods: {
handleClick () {
this.showGallary = true
},
handleGallaryClose () {
this.showGallary = false
}
},
components: {
CommonGallary
},
}
</script>
gallary的js:
<script>
export default {
name: 'CommonGallary',
props:{
imgs: {
type: Array,
default () {
return []
}
}
},
data () {
return {
swiperOptions: {
pagination: '.swiper-pagination',
paginationType: 'fraction',
// 这个是添加下面的图1/2文字效果
observeParents: true,
observer: true
}
}
},
methods: {
handleGallaryClick() {
this.$emit('close')
}
}
}
</script>