Skip to content

Commit 1173a91

Browse files
tangjinzhoutangjinzhou
committed
fix slider
1 parent 41e6cc0 commit 1173a91

File tree

9 files changed

+61
-62
lines changed

9 files changed

+61
-62
lines changed

‎components/slider/index.jsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default {
7474
},
7575
}))
7676
},
77-
handleWithTooltip (h, { value, dragging, index, refStr, ...restProps }) {
77+
handleWithTooltip (h, { value, dragging, index, ref, ...restProps }) {
7878
const { tooltipPrefixCls, tipFormatter } = this.$props
7979
const { visibles } = this
8080
const visible = tipFormatter ? (visibles[index] || dragging) : false
@@ -94,9 +94,7 @@ export default {
9494
value,
9595
...restProps,
9696
},
97-
attrs: {
98-
refStr,
99-
},
97+
ref,
10098
on: {
10199
mouseenter: () => this.toggleTooltipVisible(index, true),
102100
mouseleave: () => this.toggleTooltipVisible(index, false),
@@ -124,8 +122,8 @@ export default {
124122
if (range) {
125123
const vcRangeProps = {
126124
props: {
127-
handle: this.handleWithTooltip,
128125
...restProps,
126+
handle: this.handleWithTooltip,
129127
},
130128
ref: 'sliderRef',
131129
on: this.$listeners,
@@ -134,8 +132,8 @@ export default {
134132
}
135133
const vcSliderProps = {
136134
props: {
137-
handle: this.handleWithTooltip,
138135
...restProps,
136+
handle: this.handleWithTooltip,
139137
},
140138
ref: 'sliderRef',
141139
on: this.$listeners,

‎components/vc-slider/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
// base rc-slider e7af5aa6e252a16cc97d9627b28e19e58b519bd2
12
import Slider from './src/'
23
export default Slider

‎components/vc-slider/src/Handle.jsx

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@ export default {
1717
max: PropTypes.number,
1818
value: PropTypes.number,
1919
tabIndex: PropTypes.number,
20-
refStr: PropTypes.any,
21-
handleFocus: PropTypes.func.def(noop),
22-
handleBlur: PropTypes.func.def(noop),
20+
// handleFocus: PropTypes.func.def(noop),
21+
// handleBlur: PropTypes.func.def(noop),
2322
},
2423
data () {
2524
return {
@@ -31,15 +30,12 @@ export default {
3130
// mouseup won't trigger if mouse moved out of handle,
3231
// so we listen on document here.
3332
this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp)
34-
this.refStr = this.$props.refStr
3533
})
3634
},
3735
beforeDestroy () {
38-
this.$nextTick(() => {
39-
if (this.onMouseUpListener) {
40-
this.onMouseUpListener.remove()
41-
}
42-
})
36+
if (this.onMouseUpListener) {
37+
this.onMouseUpListener.remove()
38+
}
4339
},
4440
methods: {
4541
setClickFocus (focused) {
@@ -50,12 +46,8 @@ export default {
5046
this.setClickFocus(true)
5147
}
5248
},
53-
onBlur (e) {
49+
handleBlur (e) {
5450
this.setClickFocus(false)
55-
this.handleBlur(e)
56-
},
57-
onFocus (e) {
58-
this.handleFocus(e)
5951
},
6052
handleKeyDown () {
6153
this.setClickFocus(false)
@@ -73,7 +65,7 @@ export default {
7365
},
7466
render () {
7567
const {
76-
prefixCls, vertical, offset, disabled, min, max, value, tabIndex, refStr,
68+
prefixCls, vertical, offset, disabled, min, max, value, tabIndex,
7769
} = getOptionProps(this)
7870

7971
const className = {
@@ -99,22 +91,20 @@ export default {
9991
attrs: {
10092
role: 'slider',
10193
tabIndex: disabled ? null : (tabIndex || 0),
102-
refStr,
10394
...ariaProps,
10495
},
10596
class: className,
10697
on: {
107-
blur: this.onBlur,
108-
focus: this.onFocus,
109-
keydown: this.handleKeyDown,
11098
...this.$listeners,
99+
blur: this.handleBlur,
100+
keydown: this.handleKeyDown,
111101
},
112102
ref: 'handle',
103+
style: elStyle,
113104
}
114105
return (
115106
<div
116107
{...handleProps}
117-
style={elStyle}
118108
/>
119109
)
120110
},

‎components/vc-slider/src/Range.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,8 @@ const Range = {
9999
this.$emit('beforeChange', bounds)
100100

101101
const value = this.calcValueByPos(position)
102+
this.startValue = value
103+
this.startPosition = position
102104

103105
const closestBound = this.getClosestBound(value)
104106
this.prevMovedHandleIndex = this.getBoundNeedMoving(value, closestBound)
@@ -319,7 +321,7 @@ const Range = {
319321
)
320322
})
321323
},
322-
renderSlider (h) {
324+
renderSlider () {
323325
const {
324326
sHandle,
325327
bounds,
@@ -333,12 +335,13 @@ const Range = {
333335
trackStyle,
334336
handleStyle,
335337
tabIndex,
338+
$createElement,
336339
} = this
337340

338341
const offsets = bounds.map(v => this.calcOffset(v))
339342

340343
const handleClassName = `${prefixCls}-handle`
341-
const handles = bounds.map((v, i) => handleGenerator(h, {
344+
const handles = bounds.map((v, i) => handleGenerator($createElement, {
342345
className: classNames({
343346
[handleClassName]: true,
344347
[`${handleClassName}-${i + 1}`]: true,
@@ -354,7 +357,7 @@ const Range = {
354357
max,
355358
disabled,
356359
style: handleStyle[i],
357-
refStr: 'handleRef' + i,
360+
ref: 'handleRefs_' + i,
358361
handleFocus: this.onFocus,
359362
handleBlur: this.onBlur,
360363
}))

‎components/vc-slider/src/Slider.jsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ const Slider = {
9494

9595
const value = this.calcValueByPos(position)
9696

97+
this.startValue = value
98+
this.startPosition = position
9799
if (value === sValue) return
98100

99101
this.prevMovedHandleIndex = 0
@@ -152,7 +154,7 @@ const Slider = {
152154
/>
153155
)
154156
},
155-
renderSlider (h) {
157+
renderSlider () {
156158
const {
157159
prefixCls,
158160
vertical,
@@ -168,7 +170,7 @@ const Slider = {
168170
} = this
169171
const { sValue, dragging } = this
170172
const offset = this.calcOffset(sValue)
171-
const handle = handleGenerator(h, {
173+
const handle = handleGenerator(this.$createElement, {
172174
prefixCls,
173175
vertical,
174176
offset,
@@ -180,7 +182,7 @@ const Slider = {
180182
index: 0,
181183
tabIndex,
182184
style: handleStyle[0] || handleStyle,
183-
refStr: 'handleRef0',
185+
ref: 'handleRefs_0',
184186
handleFocus: this.onFocus,
185187
handleBlur: this.onBlur,
186188
})

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const Marks = {
1313
lowerBound,
1414
max, min,
1515
} = context.props
16-
const { clickLabel } = context.listeners
16+
// antd未开发完成
17+
// const { clickLabel } = context.listeners
1718
const marksKeys = Object.keys(marks)
1819
const marksCount = marksKeys.length
1920
const unit = marksCount > 1 ? 100 / (marksCount - 1) : 100
@@ -55,8 +56,8 @@ const Marks = {
5556
class={markClassName}
5657
style={markStyle}
5758
key={point}
58-
onMouseDown={(e) => clickLabel(e, point)}
59-
onTouchStart={(e) => clickLabel(e, point)}
59+
// onMousedown={(e) => clickLabel(e, point)}
60+
// onTouchstart={(e) => clickLabel(e, point)}
6061
>
6162
{markLabel}
6263
</span>

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

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,16 @@ export default function createSlider (Component) {
4545
max: 100,
4646
step: 1,
4747
marks: {},
48-
handle (h, { index, refStr, className, style, ...restProps }) {
48+
handle (h, { index, ref, className, style, ...restProps }) {
4949
delete restProps.dragging
5050
const handleProps = {
5151
props: {
5252
...restProps,
5353
},
54-
attrs: {
55-
refStr,
56-
},
5754
class: className,
5855
style,
5956
key: index,
57+
ref,
6058
}
6159
return <Handle {...handleProps} />
6260
},
@@ -80,7 +78,6 @@ export default function createSlider (Component) {
8078
step
8179
)
8280
}
83-
this.handlesRefs = []
8481
return {}
8582
},
8683
beforeDestroy () {
@@ -93,21 +90,22 @@ export default function createSlider (Component) {
9390
this.$nextTick(() => {
9491
// Snapshot testing cannot handle refs, so be sure to null-check this.
9592
this.document = this.$refs.sliderRef && this.$refs.sliderRef.ownerDocument
96-
this.setHandleRefs()
93+
// this.setHandleRefs()
9794
})
9895
},
99-
methods: {
100-
setHandleRefs () {
101-
const refs = this.$refs.handleRef
102-
const children = Array.prototype.slice.call(refs.children)
103-
children.map((item) => {
104-
const refStr = item.getAttribute('refStr')
105-
if (refStr.indexOf('handleRef') > -1) {
106-
const handleArr = refStr.split('handleRef')
107-
this.handlesRefs[handleArr[1]] = item
96+
computed: {
97+
handlesRefs () {
98+
const handlesRefs = []
99+
for (const [k, v] of Object.entries(this.$refs)) {
100+
const matchs = k.match(/handleRefs_(\d+$)/)
101+
if (matchs) {
102+
handlesRefs[+matchs[1]] = v
108103
}
109-
})
104+
}
105+
return handlesRefs
110106
},
107+
},
108+
methods: {
111109
onMouseDown (e) {
112110
if (e.button !== 0) { return }
113111
const isVertical = this.vertical
@@ -172,11 +170,16 @@ export default function createSlider (Component) {
172170
/* eslint-enable no-unused-expressions */
173171
},
174172
onMouseUp () {
175-
if (this.$children && this.$children[this.prevMovedHandleIndex]) {
176-
const handleCom = utils.getComponentProps(this.$children[this.prevMovedHandleIndex], 'clickFocus')
177-
if (handleCom) {
178-
handleCom.clickFocus()
179-
}
173+
// if (this.$children && this.$children[this.prevMovedHandleIndex]) {
174+
// const handleCom = utils.getComponentProps(this.$children[this.prevMovedHandleIndex], 'clickFocus')
175+
// console.log('handleCom', handleCom)
176+
// if (handleCom) {
177+
// // handleCom.clickFocus()
178+
// }
179+
180+
// }
181+
if (this.handlesRefs[this.prevMovedHandleIndex]) {
182+
this.handlesRefs[this.prevMovedHandleIndex].clickFocus()
180183
}
181184
},
182185
onMouseMove (e) {
@@ -244,7 +247,8 @@ export default function createSlider (Component) {
244247
},
245248
onClickMarkLabel (e, value) {
246249
e.stopPropagation()
247-
this.$emit('change', { value })
250+
this.onChange({ value })
251+
// this.$emit('change', value)
248252
},
249253
},
250254
render (h) {
@@ -318,9 +322,7 @@ export default function createSlider (Component) {
318322
dotStyle={dotStyle}
319323
activeDotStyle={activeDotStyle}
320324
/>
321-
<div ref='handleRef'>
322-
{handles}
323-
</div>
325+
{handles}
324326
<Marks
325327
{...markProps}
326328
/>

‎components/vc-slider/src/utils.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import keyCode from '../../_util/KeyCode'
22

33
export function isEventFromHandle (e, handles) {
4+
console.log(Object.keys(handles)
5+
.some(key => e.target === handles[key].$el))
46
return Object.keys(handles)
5-
.some(key => e.target === handles[key])
7+
.some(key => e.target === handles[key].$el)
68
}
79

810
export function isValueOutOfRange (value, { min, max }) {

‎site/routes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
33
const AsyncTestComp = () => {
44
const d = window.location.hash.replace('#', '')
55
return {
6-
component: import(`../components/tree/demo/${d}`),
6+
component: import(`../components/slider/demo/${d}`),
77
}
88
}
99

0 commit comments

Comments
 (0)