fix slider
parent
01570ca308
commit
6aa1966af0
|
@ -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,
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
// base rc-slider e7af5aa6e252a16cc97d9627b28e19e58b519bd2
|
||||
import Slider from './src/'
|
||||
export default Slider
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
}))
|
||||
|
|
|
@ -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,
|
||||
})
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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 }) {
|
||||
|
|
|
@ -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}`),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue