实现element的Carousel左右切换箭头

本文主要是介绍实现element的Carousel左右切换箭头，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html：我这里是让鼠标进入el-form表单时箭头出现，点击箭头切换表单内容，其中用到mouseover，mouseleave来监听鼠标进入和离开动作

<div><el-form :model="dataForm" ref="dataForm"  @mouseover.native="enter" @mouseleave.native="leave" ><transition name="arrow-left"><el-button type="info" v-if="type!='add'" v-show="arrow" icon="el-icon-arrow-left" class="arrow el-carousel__arrow--left" @click="skip('pre')" circle></el-button></transition><transition name="arrow-right"><el-button type="info" v-if="type!='add'" v-show="arrow" icon="el-icon-arrow-right" class="arrow el-carousel__arrow--right" @click="skip('next')" circle></el-button></transition></el-form>	
</div>

v-show控制箭头的出现

js

enter(){this.arrow = true},
leave(){this.arrow = false},

css

.arrow {border: none;outline: 0;padding: 0;margin: 0;height: 36px;width: 36px;cursor: pointer;transition: .3s;border-radius: 50%;/* background-color: rgba(31,45,61,.11); */color: #FFF;position: fixed;/* 让箭头悬停在中间 */top: 50%;z-index: 10;transform: translateY(-50%);text-align: center;font-size: 12px;
}
.el-button--info{background-color: rgba(31,45,61,.11);
}
.el-button--info:hover{background-color: rgba(31,45,61,.23);
}
/* 过渡动画 */
.arrow-left-enter,
.arrow-left-leave-active {transform: translateY(-50%) translateX(-10px);opacity: 0;
}
.arrow-right-enter,
.arrow-right-leave-active {transform: translateY(-50%) translateX(10px);opacity: 0;
}