第一步
创建两个按钮
第二步
书写按钮选中和未选中状态的类名以及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 !== 当前按钮索引}
网友评论