101 lines
2.5 KiB
Vue
101 lines
2.5 KiB
Vue
import PropTypes from '../../_util/vue-types'
|
|
import BaseMixin from '../../_util/BaseMixin'
|
|
import Tooltip from '../../vc-tooltip'
|
|
import { getOptionProps } from '../../_util/props-util'
|
|
import Handle from './Handle'
|
|
|
|
export default function createSliderWithTooltip (Component) {
|
|
return {
|
|
mixins: [BaseMixin, Component],
|
|
props: {
|
|
...Component.props,
|
|
tipFormatter: PropTypes.func.def((value) => { return value }),
|
|
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
|
tipProps: PropTypes.object.def({}),
|
|
},
|
|
data () {
|
|
return {
|
|
visibles: {},
|
|
}
|
|
},
|
|
methods: {
|
|
handleTooltipVisibleChange (index, visible) {
|
|
this.setState((prevState) => {
|
|
return {
|
|
visibles: {
|
|
...prevState.visibles,
|
|
[index]: visible,
|
|
},
|
|
}
|
|
})
|
|
},
|
|
handleWithTooltip ({ value, dragging, index, disabled, ...restProps }) {
|
|
const {
|
|
tipFormatter,
|
|
tipProps,
|
|
handleStyle,
|
|
} = this.$props
|
|
|
|
const {
|
|
prefixCls = 'rc-slider-tooltip',
|
|
overlay = tipFormatter(value),
|
|
placement = 'top',
|
|
visible = false,
|
|
...restTooltipProps
|
|
} = tipProps
|
|
|
|
let handleStyleWithIndex
|
|
if (Array.isArray(handleStyle)) {
|
|
handleStyleWithIndex = handleStyle[index] || handleStyle[0]
|
|
} else {
|
|
handleStyleWithIndex = handleStyle
|
|
}
|
|
|
|
const tooltipProps = {
|
|
props: {
|
|
...restTooltipProps,
|
|
prefixCls,
|
|
overlay,
|
|
placement,
|
|
visible: (!disabled && (this.visibles[index] || dragging)) || visible,
|
|
},
|
|
key: index,
|
|
}
|
|
const handleProps = {
|
|
props: {
|
|
value,
|
|
...restProps,
|
|
},
|
|
on: {
|
|
mouseenter: () => this.handleTooltipVisibleChange(index, true),
|
|
mouseleave: () => this.handleTooltipVisibleChange(index, false),
|
|
},
|
|
style: {
|
|
...handleStyleWithIndex,
|
|
},
|
|
}
|
|
|
|
return (
|
|
<Tooltip
|
|
{...tooltipProps}
|
|
>
|
|
|
|
<Handle
|
|
{...handleProps}
|
|
/>
|
|
</Tooltip>
|
|
)
|
|
},
|
|
},
|
|
render () {
|
|
const componentProps = {
|
|
props: {
|
|
...getOptionProps(this),
|
|
handle: this.handleWithTooltip,
|
|
},
|
|
}
|
|
return <Component {...componentProps}/>
|
|
},
|
|
}
|
|
}
|