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

fix: update vc-slider

pull/309/head
wangxueliang 2018-11-30 09:30:43 +08:00
parent 752c82df21
commit e8743ec48d
4 changed files with 90 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
components/vc-slider/demo/handle.jsx
View File

@ -3,7 +3,10 @@ import Tooltip from '../../vc-tooltip'
import '../assets/index.less' import '../assets/index.less'
import '../../vc-tooltip/assets/bootstrap.less' import '../../vc-tooltip/assets/bootstrap.less'
const { Handle, Range } = Slider const { Handle } = Slider
const { createSliderWithTooltip } = Slider
const Range = createSliderWithTooltip(Slider.Range)
export default { export default {
data () { data () {
@ -18,7 +21,7 @@ export default {
}, },
}, },
render () { render () {
const handle = (h, props) => { const handle = (props) => {
const { value, dragging, index, ref, style, ...restProps } = props const { value, dragging, index, ref, style, ...restProps } = props
const handleProps = { const handleProps = {
props: { props: {
@ -43,60 +46,60 @@ export default {
) )
} }
const handleRange = (h, { value, ref, dragging, index, disabled, style, ...restProps }) => { // const handleRange = (h, { value, ref, dragging, index, disabled, style, ...restProps }) => {
const tipFormatter = value => `${value}%` // const tipFormatter = value => `${value}%`
const tipProps = {} // const tipProps = {}
const { // const {
prefixCls = 'rc-slider-tooltip', // prefixCls = 'rc-slider-tooltip',
overlay = tipFormatter(value), // overlay = tipFormatter(value),
placement = 'top', // placement = 'top',
visible = visible || false, // visible = visible || false,
...restTooltipProps } = tipProps // ...restTooltipProps } = tipProps
let handleStyleWithIndex // let handleStyleWithIndex
if (Array.isArray(style)) { // if (Array.isArray(style)) {
handleStyleWithIndex = style[index] || style[0] // handleStyleWithIndex = style[index] || style[0]
} else { // } else {
handleStyleWithIndex = style // handleStyleWithIndex = style
} // }
const tooltipProps = { // const tooltipProps = {
props: { // props: {
prefixCls, // prefixCls,
overlay, // overlay,
placement, // placement,
visible: (!disabled && (this.visibles[index] || dragging)) || visible, // visible: (!disabled && (this.visibles[index] || dragging)) || visible,
...restTooltipProps, // ...restTooltipProps,
}, // },
key: index, // key: index,
} // }
const handleProps = { // const handleProps = {
props: { // props: {
value, // value,
...restProps, // ...restProps,
}, // },
on: { // on: {
mouseenter: () => this.handleTooltipVisibleChange(index, true), // mouseenter: () => this.handleTooltipVisibleChange(index, true),
mouseleave: () => this.handleTooltipVisibleChange(index, false), // mouseleave: () => this.handleTooltipVisibleChange(index, false),
}, // },
style: { // style: {
...handleStyleWithIndex, // ...handleStyleWithIndex,
}, // },
ref, // ref,
} // }
return ( // return (
<Tooltip // <Tooltip
{...tooltipProps} // {...tooltipProps}
> // >
<Handle // <Handle
{...handleProps} // {...handleProps}
/> // />
</Tooltip> // </Tooltip>
) // )
} // }
const wrapperStyle = 'width: 400px; margin: 50px' const wrapperStyle = 'width: 400px; margin: 50px'
return ( return (
@ -107,7 +110,7 @@ export default {
</div> </div>
<div style={wrapperStyle}> <div style={wrapperStyle}>
<p>Range with custom handle</p> <p>Range with custom handle</p>
<Range min={0} max={20} defaultValue={[3, 10]} handle={handleRange} /> <Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
</div> </div>
</div> </div>
) )

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

@ -334,17 +334,17 @@ const Range = {
disabled, disabled,
min, min,
max, max,
handle: handleGenerator, handle,
defaultHandle,
trackStyle, trackStyle,
handleStyle, handleStyle,
tabIndex, tabIndex,
$createElement,
} = this } = this
const handleGenerator = handle || defaultHandle
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($createElement, { const handles = bounds.map((v, i) => handleGenerator({
className: classNames({ className: classNames({
[handleClassName]: true, [handleClassName]: true,
[`${handleClassName}-${i + 1}`]: true, [`${handleClassName}-${i + 1}`]: true,

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

@ -165,11 +165,13 @@ const Slider = {
tabIndex, tabIndex,
min, min,
max, max,
handle: handleGenerator, handle,
defaultHandle,
} = this } = this
const handleGenerator = handle || defaultHandle
const { sValue, dragging } = this const { sValue, dragging } = this
const offset = this.calcOffset(sValue) const offset = this.calcOffset(sValue)
const handle = handleGenerator(this.$createElement, { const handles = handleGenerator({
className: `${prefixCls}-handle`, className: `${prefixCls}-handle`,
prefixCls, prefixCls,
vertical, vertical,
@ -190,7 +192,7 @@ const Slider = {
const _trackStyle = trackStyle[0] || trackStyle const _trackStyle = trackStyle[0] || trackStyle
return { return {
tracks: this.getTrack({ prefixCls, vertical, included, offset, minimumTrackStyle, _trackStyle }), tracks: this.getTrack({ prefixCls, vertical, included, offset, minimumTrackStyle, _trackStyle }),
handles: handle, handles,
} }
}, },
}, },

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

@ -45,19 +45,19 @@ export default function createSlider (Component) {
max: 100, max: 100,
step: 1, step: 1,
marks: {}, marks: {},
handle (h, { index, ref, className, style, ...restProps }) { // handle ({ index, ref, className, style, ...restProps }) {
delete restProps.dragging // delete restProps.dragging
const handleProps = { // const handleProps = {
props: { // props: {
...restProps, // ...restProps,
}, // },
class: className, // class: className,
style, // style,
key: index, // key: index,
ref, // ref,
} // }
return <Handle {...handleProps} /> // return <Handle {...handleProps} />
}, // },
included: true, included: true,
disabled: false, disabled: false,
dots: false, dots: false,
@ -106,6 +106,19 @@ export default function createSlider (Component) {
}, },
}, },
methods: { methods: {
defaultHandle ({ index, ref, className, style, ...restProps }) {
delete restProps.dragging
const handleProps = {
props: {
...restProps,
},
class: className,
style,
key: index,
ref,
}
return <Handle {...handleProps} />
},
onMouseDown (e) { onMouseDown (e) {
if (e.button !== 0) { return } if (e.button !== 0) { return }
const isVertical = this.vertical const isVertical = this.vertical