Merge pull request #2010 from Leopoldthecoder/carousel-hover

Carousel: improve arrow hover behavior in card mode

examples/docs/zh-CN/carousel.md

@@ -36,9 +36,8 @@
   
   .demo-carousel .el-carousel__item {
     h3 {
-      color: #475669;
+      color: #fff;
       font-size: 18px;
-      opacity: 0.75;
       line-height: 300px;
       margin: 0;
     }

packages/carousel/src/item.vue

@@ -5,7 +5,8 @@
     :class="{
       'is-active': active,
       'el-carousel__item--card': $parent.type === 'card',
-      'is-in-stage': inStage
+      'is-in-stage': inStage,
+      'is-hover': hover
     }"
     @click="handleItemClick"
     :style="{
@@ -33,6 +34,7 @@
 
     data() {
       return {
+        hover: false,
         translate: 0,
         scale: 1,
         active: false,

packages/carousel/src/main.vue

@@ -11,6 +11,8 @@
         <button
           v-if="arrow !== 'never'"
           v-show="arrow === 'always' || hover"
+          @mouseenter="handleButtonEnter('left')"
+          @mouseleave="handleButtonLeave"
           @click.stop="throttledArrowClick(activeIndex - 1)"
           class="el-carousel__arrow el-carousel__arrow--left">
           <i class="el-icon-arrow-left"></i>
@@ -20,6 +22,8 @@
         <button
           v-if="arrow !== 'never'"
           v-show="arrow === 'always' || hover"
+          @mouseenter="handleButtonEnter('right')"
+          @mouseleave="handleButtonLeave"
           @click.stop="throttledArrowClick(activeIndex + 1)"
           class="el-carousel__arrow el-carousel__arrow--right">
           <i class="el-icon-arrow-right"></i>
@@ -109,6 +113,32 @@ export default {
       this.startTimer();
     },
 
+    itemInStage(item, index) {
+      const length = this.items.length;
+      if (index === length - 1 && item.inStage && this.items[0].active ||
+        (item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
+        return 'left';
+      } else if (index === 0 && item.inStage && this.items[length - 1].active ||
+        (item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
+        return 'right';
+      }
+      return false;
+    },
+
+    handleButtonEnter(arrow) {
+      this.items.forEach((item, index) => {
+        if (arrow === this.itemInStage(item, index)) {
+          item.hover = true;
+        }
+      });
+    },
+
+    handleButtonLeave() {
+      this.items.forEach(item => {
+        item.hover = false;
+      });
+    },
+
     handleItemChange() {
       debounce(100, () => {
         this.updateItems();

packages/theme-default/src/carousel-item.css

@@ -20,7 +20,8 @@
         &.is-in-stage {
           cursor: pointer;
           z-index: var(--index-normal);
-          &:hover .el-carousel__mask {
+          &:hover .el-carousel__mask,
+          &.is-hover .el-carousel__mask {
             opacity: 0.12;
           }
         }