vue 避免轮播绑定的 data 改变后将轮播 index 归零,(修改源码,添加传参)将当前轮播 index 赋值为当前点击 marker 的索引
最近在做项目的过程中,需要在地图添加轮播图
- 要实现的功能:
- 地图上marker根据返回的数据分为东北、东南、西南、西北四个方向,从西北方向依次轮播,且与其对应marker的轮播图数据同步轮播(代表轮播图也需要分为4组)
- 当鼠标移入地图后,轮播停止
- 当鼠标选中某个marker后,轮播图需要轮播到对应的轮播图(如果当前点击的marker刚好是当前轮播marker组的最后一个,则将轮播图绑定的数组追加下一波的数据)
- 鼠标移出地图后从当前选中的轮播图开始继续轮播
在做的过程中发现,当一组(如西北方向)的marker轮播完成切换到另一组(如东北方向)时,marker显示正常,但是轮播图的索引会归零,所以想到了要更改源码来控制其索引不让其归零,
- 找到elementUi.js中的轮播图设置当前轮播图索引的方法进行如下修改,代码如下
setActiveItem: function (e,page) {
if ('string' == typeof e) {
var t = this.items.filter(function (t) {
return t.name === e
})
t.length > 0 && (e = this.items.indexOf(t[0]))
}
if (((e = Number(e)), isNaN(e) || e !== Math.floor(e)))
console.warn(
'[Element Warn][Carousel]index must be an integer.'
)
else {
if(page == 'owner') {
var i = this.items.length,
n = this.activeIndex;
this.activeIndex = e
n === this.activeIndex && this.resetItemPosition(n),
this.resetTimer()
} else {
var i = this.items.length,
n = this.activeIndex
;(this.activeIndex =
e < 0
? this.loop
? i - 1
: 0
: e >= i
? this.loop
? 0
: i - 1
: e),
n === this.activeIndex && this.resetItemPosition(n),
this.resetTimer()
}
}
},
- 使用
this.$refs.carousel.setActiveItem(i, 'owner')