实现element的Carousel左右切换箭头

原创已于 2023-08-07 11:33:40 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

于 2023-07-24 16:48:58 首次发布

Vue前端专栏收录该内容

6 篇文章

订阅专栏

这篇文章展示了如何利用HTML、Vue.js的事件监听器mouseover和mouseleave，以及transition组件来实现在鼠标进入表单时显示箭头，点击箭头切换表单内容的功能。箭头的显示和隐藏由v-show控制，并通过CSS实现了过渡动画。

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

效果：