feat: slider add tooltipVisible and optimize experience

Author: tangjinzhou

components/vc-slider/index.js

@@ -1,3 +1,7 @@
 // base rc-slider 8.6.4
+import Vue from 'vue'
+import ref from 'vue-ref'
 import Slider from './src/'
+
+Vue.use(ref, { name: 'ant-ref' })
 export default Slider

components/vc-slider/src/Handle.jsx

@@ -26,11 +26,9 @@ export default {
     }
   },
   mounted () {
-    this.$nextTick(() => {
-      // mouseup won't trigger if mouse moved out of handle
-      // so we listen on document here.
-      this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp)
-    })
+    // mouseup won't trigger if mouse moved out of handle
+    // so we listen on document here.
+    this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp)
   },
   beforeDestroy () {
     if (this.onMouseUpListener) {
@@ -46,8 +44,9 @@ export default {
         this.setClickFocus(true)
       }
     },
-    handleBlur () {
+    handleBlur (e) {
       this.setClickFocus(false)
+      this.__emit('blur', e)
     },
     handleKeyDown () {
       this.setClickFocus(false)
@@ -62,12 +61,16 @@ export default {
     blur () {
       this.$refs.handle.blur()
     },
+    // when click can not focus in vue, use mousedown trigger focus
+    handleMousedown (e) {
+      this.focus()
+      this.__emit('mousedown', e)
+    },
   },
   render () {
     const {
       prefixCls, vertical, offset, disabled, min, max, value, tabIndex,
     } = getOptionProps(this)
-
     const className = classNames(
       this.$props.className,
       {
@@ -76,9 +79,7 @@ export default {
     )
 
     const postionStyle = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` }
-    const elStyle = {
-      ...postionStyle,
-    }
+
     const ariaProps = {
       'aria-valuemin': min,
       'aria-valuemax': max,
@@ -93,14 +94,17 @@ export default {
         ...ariaProps,
       },
       class: className,
-      on: this.$listeners,
+      on: {
+        ...this.$listeners,
+        blur: this.handleBlur,
+        keydown: this.handleKeyDown,
+        mousedown: this.handleMousedown,
+      },
       ref: 'handle',
-      style: elStyle,
+      style: postionStyle,
     }
     return (
-      <div
-        {...handleProps}
-      />
+      <div {...handleProps} />
     )
   },
 }

components/vc-slider/src/Range.jsx

@@ -362,9 +362,14 @@ const Range = {
         max,
         disabled,
         style: handleStyle[i],
-        ref: 'handleRefs_' + i,
-        handleFocus: this.onFocus,
-        handleBlur: this.onBlur,
+        directives: [{
+          name: 'ant-ref',
+          value: h => this.saveHandle(i, h),
+        }],
+        on: {
+          focus: this.onFocus,
+          blur: this.onBlur,
+        },
       }))
 
       return {

components/vc-slider/src/Slider.jsx

@@ -189,9 +189,14 @@ const Slider = {
         index: 0,
         tabIndex,
         style: handleStyle[0] || handleStyle,
-        ref: 'handleRefs_0',
-        handleFocus: this.onFocus,
-        handleBlur: this.onBlur,
+        directives: [{
+          name: 'ant-ref',
+          value: h => this.saveHandle(0, h),
+        }],
+        on: {
+          focus: this.onFocus,
+          blur: this.onBlur,
+        },
       })
 
       const _trackStyle = trackStyle[0] || trackStyle

components/vc-slider/src/common/createSlider.jsx

@@ -79,6 +79,7 @@ export default function createSlider (Component) {
           step
         )
       }
+      this.handlesRefs = {}
       return {}
     },
     mounted () {
@@ -94,20 +95,8 @@ export default function createSlider (Component) {
         this.removeDocumentEvents()
       })
     },
-    computed: {
-      handlesRefs () {
-        const handlesRefs = []
-        for (const [k, v] of Object.entries(this.$refs)) {
-          const matchs = k.match(/handleRefs_(\d+$)/)
-          if (matchs) {
-            handlesRefs[+matchs[1]] = v
-          }
-        }
-        return handlesRefs
-      },
-    },
     methods: {
-      defaultHandle ({ index, ref, className, style, ...restProps }) {
+      defaultHandle ({ index, directives, className, style, on, ...restProps }) {
         delete restProps.dragging
         if (restProps.value === null) {
           return null
@@ -119,7 +108,8 @@ export default function createSlider (Component) {
           class: className,
           style,
           key: index,
-          ref,
+          directives,
+          on,
         }
         return <Handle {...handleProps} />
       },
@@ -264,6 +254,9 @@ export default function createSlider (Component) {
         const ratio = (value - min) / (max - min)
         return ratio * 100
       },
+      saveHandle (index, handle) {
+        this.handlesRefs[index] = handle
+      },
     },
     render (h) {
       const {
@@ -306,6 +299,7 @@ export default function createSlider (Component) {
       return (
         <div
           ref='sliderRef'
+          tabIndex='-1'
           class={sliderClassName}
           onTouchstart={disabled ? noop : this.onTouchStart}
           onMousedown={disabled ? noop : this.onMouseDown}

components/vc-slider/src/utils.js

@@ -7,7 +7,7 @@ export function isDev () {
 export function isEventFromHandle (e, handles) {
   try {
     return Object.keys(handles)
-      .some(key => e.target === handles[key].$el)
+      .some(key => e.target === handles[key].$el || e.target === handles[key])
   } catch (error) {
     return false
   }
@@ -122,18 +122,3 @@ export function getKeyboardValueMutator (e) {
     default: return undefined
   }
 }
-
-export function getComponentProps (obj, prop) {
-  if (obj[prop]) {
-    return obj
-  } else if (obj.$children.length) {
-    const len = obj.$children.length
-    for (let i = 0; i < len; i++) {
-      if (obj.$children[i][prop]) {
-        return obj.$children[i]
-      } else if (obj.$children[i].$children.length) {
-        return getComponentProps(obj.$children[i], prop)
-      }
-    }
-  }
-}