第一步
创建两个按钮
第二步
书写按钮选中和未选中状态的类名以及css样式
第三步
给el-carousel添加ref属性用来获取这个节点---carousel
第四步
给两个按钮添加点击事件,同时通过事件的参数传递当前按钮的标识,要和轮播组件的索引值相对应---@click=changeHandle(index)
第五步
通过this.$refs获取到轮播节点,再通过这个轮播组件自带的设置索引的方法改变轮播索引值,此时点击按钮已经可以控制轮播翻页
changeHandle(index){ this.$refs.carousel.setActiveItem(index) }
第六步
随着翻页操作改变按钮的选中样式
定义一个变量curIndex,通过组件自带的改变事件(@change=swiperChange),将当前索引值赋值给这个变量,按钮通过变量值来控制按钮自身的类名,从而控制选中样式
swiperChange(num){ this.curIndex=num }
第七步
选中和未选中的类名分别为select , unselect
去通过改变类名的方法控制样式,书写格式如下:
:class={"select":curIndex == 当前按钮的索引,"unselect":curIndex !== 当前按钮索引}