实现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;
}

效果：