github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix slider

pull/165/head
tjz 2018-04-14 16:38:08 +08:00
parent 41e6cc0e29
commit 1173a91584
9 changed files with 61 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/slider/index.jsx
View File

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

1
components/vc-slider/index.js
View File

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

24
components/vc-slider/src/Handle.jsx
View File

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

9
components/vc-slider/src/Range.jsx
View File

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

8
components/vc-slider/src/Slider.jsx
View File

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

7
components/vc-slider/src/common/Marks.jsx
View File

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

52
components/vc-slider/src/common/createSlider.jsx
View File

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

4
components/vc-slider/src/utils.js
View File

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

2
site/routes.js
View File

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