diff --git a/components/slider/index.jsx b/components/slider/index.jsx index 84c64e55a..5ae128e92 100644 --- a/components/slider/index.jsx +++ b/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, diff --git a/components/vc-slider/index.js b/components/vc-slider/index.js index cb6b75867..89041358d 100644 --- a/components/vc-slider/index.js +++ b/components/vc-slider/index.js @@ -1,2 +1,3 @@ +// base rc-slider e7af5aa6e252a16cc97d9627b28e19e58b519bd2 import Slider from './src/' export default Slider diff --git a/components/vc-slider/src/Handle.jsx b/components/vc-slider/src/Handle.jsx index 06c696300..2ce8d35e6 100644 --- a/components/vc-slider/src/Handle.jsx +++ b/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 (
) }, diff --git a/components/vc-slider/src/Range.jsx b/components/vc-slider/src/Range.jsx index 3af78d1bb..2af4fb937 100644 --- a/components/vc-slider/src/Range.jsx +++ b/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, })) diff --git a/components/vc-slider/src/Slider.jsx b/components/vc-slider/src/Slider.jsx index f8bbe4587..0ea92aaac 100644 --- a/components/vc-slider/src/Slider.jsx +++ b/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, }) diff --git a/components/vc-slider/src/common/Marks.jsx b/components/vc-slider/src/common/Marks.jsx index fae9c0ffe..df2a50a6a 100644 --- a/components/vc-slider/src/common/Marks.jsx +++ b/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} diff --git a/components/vc-slider/src/common/createSlider.jsx b/components/vc-slider/src/common/createSlider.jsx index b1d0c86c9..27efb9ac2 100644 --- a/components/vc-slider/src/common/createSlider.jsx +++ b/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 }, @@ -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} /> -
- {handles} -
+ {handles} diff --git a/components/vc-slider/src/utils.js b/components/vc-slider/src/utils.js index 594af75bd..e39e2fe0c 100644 --- a/components/vc-slider/src/utils.js +++ b/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 }) { diff --git a/site/routes.js b/site/routes.js index e969297dd..64b7a3110 100644 --- a/site/routes.js +++ b/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}`), } }