Cascader: optimize hover to expand experience (#8010)

* Cascader: optimize hover to expand experience

pass eslint

* Cascader: hoverThreshold configuable

packages/cascader/src/main.vue

@@ -149,6 +149,10 @@ export default {
     beforeFilter: {
       type: Function,
       default: () => (() => {})
+    },
+    hoverThreshold: {
+      type: Number,
+      default: 500
     }
   },
 
@@ -224,6 +228,7 @@ export default {
       this.menu.expandTrigger = this.expandTrigger;
       this.menu.changeOnSelect = this.changeOnSelect;
       this.menu.popperClass = this.popperClass;
+      this.menu.hoverThreshold = this.hoverThreshold;
       this.popperElm = this.menu.$el;
       this.menu.$on('pick', this.handlePick);
       this.menu.$on('activeItemChange', this.handleActiveItemChange);

packages/cascader/src/menu.vue

@@ -39,7 +39,8 @@
         value: [],
         expandTrigger: 'click',
         changeOnSelect: false,
-        popperClass: ''
+        popperClass: '',
+        hoverTimer: 0
       };
     },
 
@@ -135,9 +136,35 @@
         activeOptions,
         visible,
         expandTrigger,
-        popperClass
+        popperClass,
+        hoverThreshold
       } = this;
 
+      let hoverMenuRefs = {};
+      const hoverMenuHandler = e => {
+        const offsetX = e.offsetX;
+        const width = hoverMenuRefs.activeMenu.offsetWidth;
+        const height = hoverMenuRefs.activeMenu.offsetHeight;
+
+        if (e.target === hoverMenuRefs.activeItem) {
+          clearTimeout(this.hoverTimer);
+          const {activeItem} = hoverMenuRefs;
+          const offsetY_top = activeItem.offsetTop;
+          const offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
+
+          hoverMenuRefs.hoverZone.innerHTML = `
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_top} L${width} 0 V${offsetY_top} Z" />
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_Bottom} L${width} ${height} V${offsetY_Bottom} Z" />
+          `;
+        } else {
+          if (!this.hoverTimer) {
+            this.hoverTimer = setTimeout(() => {
+              hoverMenuRefs.hoverZone.innerHTML = '';
+            }, hoverThreshold);
+          }
+        }
+      };
+
       const menus = this._l(activeOptions, (menu, menuIndex) => {
         let isFlat = false;
         const items = this._l(menu, item => {
@@ -177,6 +204,7 @@
                 'is-active': item.value === activeValue[menuIndex],
                 'is-disabled': item.disabled
               }}
+              ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
               {...events}
             >
               {item.label}
@@ -188,19 +216,65 @@
           menuStyle.minWidth = this.inputWidth + 'px';
         }
 
+        const isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
+        const hoverMenuEvent = {
+          on: {
+          }
+        };
+
+        if (isHoveredMenu) {
+          hoverMenuEvent.on.mousemove = hoverMenuHandler;
+          menuStyle.position = 'relative';
+        }
+
         return (
           <ul
             class={{
               'el-cascader-menu': true,
               'el-cascader-menu--flexible': isFlat
             }}
+            {...hoverMenuEvent}
             style={menuStyle}
             refInFor
             ref="menus">
             {items}
+            {
+              isHoveredMenu
+              ? (<svg
+                ref="hoverZone"
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  height: '100%',
+                  width: '100%',
+                  left: 0,
+                  pointerEvents: 'none'
+                }}
+              ></svg>) : null
+            }
           </ul>
         );
       });
+
+      if (expandTrigger === 'hover') {
+        this.$nextTick(() => {
+          const activeItem = this.$refs.activeItem;
+
+          if (activeItem) {
+            const activeMenu = activeItem.parentElement;
+            const hoverZone = this.$refs.hoverZone;
+
+            hoverMenuRefs = {
+              activeMenu,
+              activeItem,
+              hoverZone
+            };
+          } else {
+            hoverMenuRefs = {};
+          }
+        });
+      }
+
       return (
         <transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
           <div