解决element组件中的走马灯(轮播图)自定义按钮的问题

979 阅读1分钟

如有帮助请点赞谢谢 在element组件中

主要的技术点

1.在轮播图的el-carousel上绑定ref 2.在点就按钮上绑定@click="refs.nop[index].prev()前一页面3.在点就按钮上绑定@click="refs.nop[index].prev() 前一页面 3.在点就按钮上绑定@click="refs.nop[index].next() 后一页面

<template>

<button @click="$refs.nop[index].prev()" </button> //向前一页
<button @click="$refs.nop[index].next()" </button> //向后一页
    <el-carousel 
    indicator-position="none"   
    arrow="never"           //关闭箭头
    :loop="false"           //关闭循环
    ref="nop"               //绑定事件用 搭配自定义按钮
    height="200px"          //定义高度
    direction="vertical"    
    :autoplay="false">      //是否自动轮播
        <el-carousel-item        //轮播图单页面
            v-for="item in 3"    //遍历轮播图的页数
            :key="item"          
        >    
        
        <h3 class="medium">{{ item }}</h3>   //主要内容
        
        </el-carousel-item> 
    </el-carousel> 
</template>