官方示例:Element - The world's most popular Vue UI framework
<div>
<span @click="setActiveItem('menu1')" style="cursor:pointer">菜单1</span>
<span @click="setActiveItem('menu2')" style="cursor:pointer">菜单2</span>
<span @click="setActiveItem('menu3')" style="cursor:pointer">菜单3</span>
<span @click="setActiveItem('menu4')" style="cursor:pointer">菜单4</span>
</div>
<div style="width:100%>
<el-carousel ref="carouselMenu" :interval="4000" height="11.8rem" :autoplay="false" indicator-position="none">
<el-carousel-item name="menu1">
<span class="fs-lg">菜单1</span>
</el-carousel-item>
<el-carousel-item name="menu2">
<span class="fs-lg">菜单2</span>
</el-carousel-item>
<el-carousel-item name="menu3">
<span class="fs-lg">菜单3</span>
</el-carousel-item>
<el-carousel-item name="menu4">
<span class="fs-lg">菜单4</span>
</el-carousel-item>
</el-carousel>
</div>
methods: {
setActiveItem(itemname){
this.$refs.carouselMenu.setActiveItem(itemname)
}
}