ant-design-vue/components/vc-slider/demo/handle.jsx

119 lines
2.9 KiB
Vue
Raw Normal View History

2018-03-26 10:08:36 +08:00
import Slider from '../index'
import Tooltip from '../../vc-tooltip'
import '../assets/index.less'
import '../../vc-tooltip/assets/bootstrap.less'
2018-11-30 09:30:43 +08:00
const { Handle } = Slider
const { createSliderWithTooltip } = Slider
const Range = createSliderWithTooltip(Slider.Range)
2018-03-26 10:08:36 +08:00
export default {
data () {
return {
2018-03-28 11:51:27 +08:00
visibles: [],
2018-03-26 10:08:36 +08:00
}
},
2018-03-28 11:51:27 +08:00
methods: {
handleTooltipVisibleChange (index, visible) {
this.visibles[index] = visible
this.visibles = { ...this.visibles }
},
},
2018-03-26 10:08:36 +08:00
render () {
2018-11-30 09:30:43 +08:00
const handle = (props) => {
2018-11-29 16:41:11 +08:00
const { value, dragging, index, ref, style, ...restProps } = props
2018-03-26 10:08:36 +08:00
const handleProps = {
props: {
...restProps,
value,
},
key: index,
2018-03-29 14:32:43 +08:00
style,
2018-11-29 16:41:11 +08:00
ref,
2018-03-26 10:08:36 +08:00
}
return (
<Tooltip
prefixCls='rc-slider-tooltip'
overlay={value}
visible={dragging}
placement='top'
key={index}
>
2018-03-28 11:51:27 +08:00
2018-03-26 10:08:36 +08:00
<Handle {...handleProps} />
</Tooltip>
)
}
2018-03-28 11:51:27 +08:00
2018-11-30 09:30:43 +08:00
// const handleRange = (h, { value, ref, dragging, index, disabled, style, ...restProps }) => {
// const tipFormatter = value => `${value}%`
// const tipProps = {}
2018-03-28 11:51:27 +08:00
2018-11-30 09:30:43 +08:00
// const {
// prefixCls = 'rc-slider-tooltip',
// overlay = tipFormatter(value),
// placement = 'top',
// visible = visible || false,
// ...restTooltipProps } = tipProps
2018-03-28 11:51:27 +08:00
2018-11-30 09:30:43 +08:00
// let handleStyleWithIndex
// if (Array.isArray(style)) {
// handleStyleWithIndex = style[index] || style[0]
// } else {
// handleStyleWithIndex = style
// }
2018-03-28 11:51:27 +08:00
2018-11-30 09:30:43 +08:00
// 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,
// }
2018-03-28 11:51:27 +08:00
2018-11-30 09:30:43 +08:00
// return (
// <Tooltip
// {...tooltipProps}
// >
2018-03-28 11:51:27 +08:00
2018-11-30 09:30:43 +08:00
// <Handle
// {...handleProps}
// />
// </Tooltip>
// )
// }
2018-03-26 10:08:36 +08:00
const wrapperStyle = 'width: 400px; margin: 50px'
return (
<div>
<div style={wrapperStyle}>
<p>Slider with custom handle</p>
<Slider min={0} max={20} defaultValue={3} handle={handle} />
</div>
2018-03-28 11:51:27 +08:00
<div style={wrapperStyle}>
2018-03-26 10:08:36 +08:00
<p>Range with custom handle</p>
2018-11-30 09:30:43 +08:00
<Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
2018-03-28 11:51:27 +08:00
</div>
2018-03-26 10:08:36 +08:00
</div>
)
},
}