fix slider

components/slider/index.jsx

@@ -74,7 +74,7 @@ export default {
         },
       }))
     },
-    handleWithTooltip (h, { value, dragging, index, refStr, ...restProps }) {
+    handleWithTooltip (h, { value, dragging, index, ref, ...restProps }) {
       const { tooltipPrefixCls, tipFormatter } = this.$props
       const { visibles } = this
       const visible = tipFormatter ? (visibles[index] || dragging) : false
@@ -94,9 +94,7 @@ export default {
           value,
           ...restProps,
         },
-        attrs: {
-          refStr,
-        },
+        ref,
         on: {
           mouseenter: () => this.toggleTooltipVisible(index, true),
           mouseleave: () => this.toggleTooltipVisible(index, false),
@@ -124,8 +122,8 @@ export default {
     if (range) {
       const vcRangeProps = {
         props: {
-          handle: this.handleWithTooltip,
           ...restProps,
+          handle: this.handleWithTooltip,
         },
         ref: 'sliderRef',
         on: this.$listeners,
@@ -134,8 +132,8 @@ export default {
     }
     const vcSliderProps = {
       props: {
-        handle: this.handleWithTooltip,
         ...restProps,
+        handle: this.handleWithTooltip,
       },
       ref: 'sliderRef',
       on: this.$listeners,

components/vc-slider/index.js

@@ -1,2 +1,3 @@
+// base rc-slider e7af5aa6e252a16cc97d9627b28e19e58b519bd2
 import Slider from './src/'
 export default Slider

components/vc-slider/src/Handle.jsx

@@ -17,9 +17,8 @@ export default {
     max: PropTypes.number,
     value: PropTypes.number,
     tabIndex: PropTypes.number,
-    refStr: PropTypes.any,
-    handleFocus: PropTypes.func.def(noop),
-    handleBlur: PropTypes.func.def(noop),
+    // handleFocus: PropTypes.func.def(noop),
+    // handleBlur: PropTypes.func.def(noop),
   },
   data () {
     return {
@@ -31,15 +30,12 @@ export default {
       // mouseup won't trigger if mouse moved out of handle,
       // so we listen on document here.
       this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp)
-      this.refStr = this.$props.refStr
     })
   },
   beforeDestroy () {
-    this.$nextTick(() => {
-      if (this.onMouseUpListener) {
-        this.onMouseUpListener.remove()
-      }
-    })
+    if (this.onMouseUpListener) {
+      this.onMouseUpListener.remove()
+    }
   },
   methods: {
     setClickFocus (focused) {
@@ -50,12 +46,8 @@ export default {
         this.setClickFocus(true)
       }
     },
-    onBlur (e) {
+    handleBlur (e) {
       this.setClickFocus(false)
-      this.handleBlur(e)
-    },
-    onFocus (e) {
-      this.handleFocus(e)
     },
     handleKeyDown () {
       this.setClickFocus(false)
@@ -73,7 +65,7 @@ export default {
   },
   render () {
     const {
-      prefixCls, vertical, offset, disabled, min, max, value, tabIndex, refStr,
+      prefixCls, vertical, offset, disabled, min, max, value, tabIndex,
     } = getOptionProps(this)
 
     const className = {
@@ -99,22 +91,20 @@ export default {
       attrs: {
         role: 'slider',
         tabIndex: disabled ? null : (tabIndex || 0),
-        refStr,
         ...ariaProps,
       },
       class: className,
       on: {
-        blur: this.onBlur,
-        focus: this.onFocus,
-        keydown: this.handleKeyDown,
         ...this.$listeners,
+        blur: this.handleBlur,
+        keydown: this.handleKeyDown,
       },
       ref: 'handle',
+      style: elStyle,
     }
     return (
       <div
         {...handleProps}
-        style={elStyle}
       />
     )
   },

components/vc-slider/src/Range.jsx

@@ -99,6 +99,8 @@ const Range = {
       this.$emit('beforeChange', bounds)
 
       const value = this.calcValueByPos(position)
+      this.startValue = value
+      this.startPosition = position
 
       const closestBound = this.getClosestBound(value)
       this.prevMovedHandleIndex = this.getBoundNeedMoving(value, closestBound)
@@ -319,7 +321,7 @@ const Range = {
         )
       })
     },
-    renderSlider (h) {
+    renderSlider () {
       const {
         sHandle,
         bounds,
@@ -333,12 +335,13 @@ const Range = {
         trackStyle,
         handleStyle,
         tabIndex,
+        $createElement,
       } = this
 
       const offsets = bounds.map(v => this.calcOffset(v))
 
       const handleClassName = `${prefixCls}-handle`
-      const handles = bounds.map((v, i) => handleGenerator(h, {
+      const handles = bounds.map((v, i) => handleGenerator($createElement, {
         className: classNames({
           [handleClassName]: true,
           [`${handleClassName}-${i + 1}`]: true,
@@ -354,7 +357,7 @@ const Range = {
         max,
         disabled,
         style: handleStyle[i],
-        refStr: 'handleRef' + i,
+        ref: 'handleRefs_' + i,
         handleFocus: this.onFocus,
         handleBlur: this.onBlur,
       }))

components/vc-slider/src/Slider.jsx

@@ -94,6 +94,8 @@ const Slider = {
 
       const value = this.calcValueByPos(position)
 
+      this.startValue = value
+      this.startPosition = position
       if (value === sValue) return
 
       this.prevMovedHandleIndex = 0
@@ -152,7 +154,7 @@ const Slider = {
         />
       )
     },
-    renderSlider (h) {
+    renderSlider () {
       const {
         prefixCls,
         vertical,
@@ -168,7 +170,7 @@ const Slider = {
       } = this
       const { sValue, dragging } = this
       const offset = this.calcOffset(sValue)
-      const handle = handleGenerator(h, {
+      const handle = handleGenerator(this.$createElement, {
         prefixCls,
         vertical,
         offset,
@@ -180,7 +182,7 @@ const Slider = {
         index: 0,
         tabIndex,
         style: handleStyle[0] || handleStyle,
-        refStr: 'handleRef0',
+        ref: 'handleRefs_0',
         handleFocus: this.onFocus,
         handleBlur: this.onBlur,
       })

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

@@ -13,7 +13,8 @@ const Marks = {
       lowerBound,
       max, min,
     } = context.props
-    const { clickLabel } = context.listeners
+    // antd未开发完成
+    // const { clickLabel } = context.listeners
     const marksKeys = Object.keys(marks)
     const marksCount = marksKeys.length
     const unit = marksCount > 1 ? 100 / (marksCount - 1) : 100
@@ -55,8 +56,8 @@ const Marks = {
           class={markClassName}
           style={markStyle}
           key={point}
-          onMouseDown={(e) => clickLabel(e, point)}
-          onTouchStart={(e) => clickLabel(e, point)}
+          // onMousedown={(e) => clickLabel(e, point)}
+          // onTouchstart={(e) => clickLabel(e, point)}
         >
           {markLabel}
         </span>

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

@@ -45,18 +45,16 @@ export default function createSlider (Component) {
       max: 100,
       step: 1,
       marks: {},
-      handle (h, { index, refStr, className, style, ...restProps }) {
+      handle (h, { index, ref, className, style, ...restProps }) {
         delete restProps.dragging
         const handleProps = {
           props: {
             ...restProps,
           },
-          attrs: {
-            refStr,
-          },
           class: className,
           style,
           key: index,
+          ref,
         }
         return <Handle {...handleProps} />
       },
@@ -80,7 +78,6 @@ export default function createSlider (Component) {
           step
         )
       }
-      this.handlesRefs = []
       return {}
     },
     beforeDestroy () {
@@ -93,21 +90,22 @@ export default function createSlider (Component) {
       this.$nextTick(() => {
         // Snapshot testing cannot handle refs, so be sure to null-check this.
         this.document = this.$refs.sliderRef && this.$refs.sliderRef.ownerDocument
-        this.setHandleRefs()
+        // this.setHandleRefs()
       })
     },
-    methods: {
-      setHandleRefs () {
-        const refs = this.$refs.handleRef
-        const children = Array.prototype.slice.call(refs.children)
-        children.map((item) => {
-          const refStr = item.getAttribute('refStr')
-          if (refStr.indexOf('handleRef') > -1) {
-            const handleArr = refStr.split('handleRef')
-            this.handlesRefs[handleArr[1]] = item
+    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: {
       onMouseDown (e) {
         if (e.button !== 0) { return }
         const isVertical = this.vertical
@@ -172,11 +170,16 @@ export default function createSlider (Component) {
         /* eslint-enable no-unused-expressions */
       },
       onMouseUp () {
-        if (this.$children && this.$children[this.prevMovedHandleIndex]) {
-          const handleCom = utils.getComponentProps(this.$children[this.prevMovedHandleIndex], 'clickFocus')
-          if (handleCom) {
-            handleCom.clickFocus()
-          }
+        // if (this.$children && this.$children[this.prevMovedHandleIndex]) {
+        //   const handleCom = utils.getComponentProps(this.$children[this.prevMovedHandleIndex], 'clickFocus')
+        //   console.log('handleCom', handleCom)
+        //   if (handleCom) {
+        //     // handleCom.clickFocus()
+        //   }
+
+        // }
+        if (this.handlesRefs[this.prevMovedHandleIndex]) {
+          this.handlesRefs[this.prevMovedHandleIndex].clickFocus()
         }
       },
       onMouseMove (e) {
@@ -244,7 +247,8 @@ export default function createSlider (Component) {
       },
       onClickMarkLabel (e, value) {
         e.stopPropagation()
-        this.$emit('change', { value })
+        this.onChange({ value })
+        // this.$emit('change', value)
       },
     },
     render (h) {
@@ -318,9 +322,7 @@ export default function createSlider (Component) {
             dotStyle={dotStyle}
             activeDotStyle={activeDotStyle}
           />
-          <div ref='handleRef'>
-            {handles}
-          </div>
+          {handles}
           <Marks
             {...markProps}
           />

components/vc-slider/src/utils.js

@@ -1,8 +1,10 @@
 import keyCode from '../../_util/KeyCode'
 
 export function isEventFromHandle (e, handles) {
+  console.log(Object.keys(handles)
+    .some(key => e.target === handles[key].$el))
   return Object.keys(handles)
-    .some(key => e.target === handles[key])
+    .some(key => e.target === handles[key].$el)
 }
 
 export function isValueOutOfRange (value, { min, max }) {

site/routes.js

@@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
 const AsyncTestComp = () => {
   const d = window.location.hash.replace('#', '')
   return {
-    component: import(`../components/tree/demo/${d}`),
+    component: import(`../components/slider/demo/${d}`),
   }
 }