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 { 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
components/vc-slider/index.js
View File

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

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

@ -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}
/>
)
},

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

@ -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,
}))

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

@ -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,
})

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

@ -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>

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

@ -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}
/>

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

@ -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 }) {

2
site/routes.js
View File

@ -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}`),
}
}