1 创建轮播
data() {
return {
//初始化设置小圆点的颜色
myBulletActive: '#1C9FE8'
};
},
methods:{
//外界传过来的颜色变化
this.myBulletActive = xxx(颜色变化的变量)
var mySwiper = new Swiper('.swiper',{
//分页
pagination: {
el: '.swiper-pagination',
//设置小圆点点击的样式
bulletActiveClass: 'my-bullet-active'
},
})
}
<style lang="less" scoped>
//作为变量去接收的数据
::v-deep .my-bullet-active {
background-color: v-bind(myBulletActive);
opacity: 1;
}
</style>