标签：组件 ack vertica put getter cti from 就会 spec
一，在detail组件中，向子组件zoom和 imglist传递数据，属性传递，
1.父组件detail
computed: {
...mapGetters(["categoryView", "skuInfo", "spuSaleAttrList",‘imgList‘])
},
向子组件传递数据
子组件接收
props:[‘imgList‘],
zoom子组件填充数据
注；此时控制台会报错， a.b.c假报错问题，
解决方式，此时需要判断imglist
再次填充数据
<div class="spec-preview"> <img :src="defaultImg.imgUrl" /> <div class="event" @mousemove="move"></div> <div class="big"> <img :src="defaultImg.imgUrl" ref="bigImg"/> </div> <div class="mask" ref="mask"></div> </div>
二，小图列表点击，切换类
1.在imageslist组件中定义初始索引
data() {
return {
currentIndex: 0
};
},
类名
.active {
border: 2px solid #f60;
padding: 1px;
}
2.点击小图，切换类
<div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div>
回调函数，跟新索引，
methods: {
changeIndex(index) {
this.currentIndex = index;
三，点击小图，切换一样的中图
1.在imagelist中点击小图，回调中传递index，用全局事件总线传递index,传递给兄弟组件zoom
<div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div>
点击事件回调函数，搞事件总线，$emitc触发，传递index
methods: {
changeIndex(index) {
this.currentIndex = index;
this.$bus.$emit("changeDefaultIndex", index);
}
},
在zoom组件中，监听
mounted(){
this.$bus.$on(‘changeDefaultIndex‘,this.changeDefaultIndex)
},
回调函数，跟新当前索引
methods:{
changeDefaultIndex(index){
this.defaultIndex = index
},
四，小图片的轮播图处理
1.html模板
<div class="swiper-container" ref="imglist"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
2.引入swiper
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
3. 在实例化swiper
watch: {
imgList: {
handler() {
//Vue.nextTick或者vm.$nextTick是一样的功能
//在最近的一次dom更新之后执行nextTick里面传的回调函数
this.$nextTick(() => {
new Swiper(this.$refs.imglist, {
// direction: "vertical", // 垂直切换选项
// autoplay:true,//等同于以下设置
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: ".swiper-pagination"
// },
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
slidesPerGroup:5, //点击一下滑动一组有多少张
slidesPerView:5 //一屏显示多少张
// 如果需要滚动条
// scrollbar: {
// el: ".swiper-scrollbar"
// }
});
});
},
immediate: true //立即执行，在最近dom更新之前就会执行
}
}
标签：组件 ack vertica put getter cti from 就会 spec
原文地址：https://www.cnblogs.com/fsg6/p/13357028.html
