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

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

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

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

@ -165,11 +165,13 @@ const Slider = {
tabIndex,
min,
max,
handle: handleGenerator,
handle,
defaultHandle,
} = this
const handleGenerator = handle || defaultHandle
const { sValue, dragging } = this
const offset = this.calcOffset(sValue)
const handle = handleGenerator(this.$createElement, {
const handles = handleGenerator({
className: `${prefixCls}-handle`,
prefixCls,
vertical,
@ -190,7 +192,7 @@ const Slider = {
const _trackStyle = trackStyle[0] || trackStyle
return {
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,
step: 1,
marks: {},
handle (h, { index, ref, className, style, ...restProps }) {
delete restProps.dragging
const handleProps = {
props: {
...restProps,
},
class: className,
style,
key: index,
ref,
}
return <Handle {...handleProps} />
},
// handle ({ index, ref, className, style, ...restProps }) {
// delete restProps.dragging
// const handleProps = {
// props: {
// ...restProps,
// },
// class: className,
// style,
// key: index,
// ref,
// }
// return <Handle {...handleProps} />
// },
included: true,
disabled: false,
dots: false,
@ -106,6 +106,19 @@ export default function createSlider (Component) {
},
},
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) {
if (e.button !== 0) { return }
const isVertical = this.vertical