mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 05:29:01 +08:00
224 lines
5.8 KiB
Vue
224 lines
5.8 KiB
Vue
import Slider from '../index'
|
||
import Tooltip from '../../vc-tooltip'
|
||
import '../assets/index.less'
|
||
import '../../vc-tooltip/assets/bootstrap.less'
|
||
|
||
const { Handle } = Slider
|
||
|
||
function log (value) {
|
||
console.log(value); //eslint-disable-line
|
||
}
|
||
|
||
const CustomizedSlider = {
|
||
data () {
|
||
return {
|
||
value: 50,
|
||
}
|
||
},
|
||
methods: {
|
||
onSliderChange (value) {
|
||
log(value)
|
||
this.value = value
|
||
},
|
||
onAfterChange (value) {
|
||
log(value)
|
||
},
|
||
},
|
||
render () {
|
||
return <Slider value={this.value}
|
||
onChange={this.onSliderChange} onAfterChange={this.onAfterChange}
|
||
/>
|
||
},
|
||
}
|
||
|
||
const DynamicBounds = {
|
||
data () {
|
||
return {
|
||
min: 0,
|
||
max: 100,
|
||
}
|
||
},
|
||
methods: {
|
||
onSliderChange (value) {
|
||
log(value)
|
||
this.value = value
|
||
},
|
||
onAfterChange (value) {
|
||
log(value)
|
||
},
|
||
onMinChange (e) {
|
||
this.min = +e.target.value || 0
|
||
},
|
||
onMaxChange (e) {
|
||
this.max = +e.target.value || 100
|
||
},
|
||
},
|
||
render () {
|
||
return (
|
||
<div>
|
||
<label>Min: </label>
|
||
<input type='number' value={this.min} onInput={this.onMinChange} />
|
||
<br />
|
||
<label>Max: </label>
|
||
<input type='number' value={this.max} onInput={this.onMaxChange} />
|
||
<br /><br />
|
||
<Slider defaultValue={50} min={this.min} max={this.max}
|
||
onChange={this.onSliderChange}
|
||
/>
|
||
</div>
|
||
)
|
||
},
|
||
}
|
||
|
||
const SliderWithTooltip = {
|
||
data () {
|
||
return {
|
||
visibles: [],
|
||
}
|
||
},
|
||
methods: {
|
||
handleTooltipVisibleChange (index, visible) {
|
||
this.visibles[index] = visible
|
||
this.visibles = { ...this.visibles }
|
||
},
|
||
handleRange (h, { value, dragging, index, disabled, style, ...restProps }) {
|
||
const tipFormatter = value => `${value}%`
|
||
const tipProps = { overlayClassName: 'foo' }
|
||
|
||
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
|
||
}
|
||
|
||
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),
|
||
visibleChange: log,
|
||
},
|
||
style: {
|
||
...handleStyleWithIndex,
|
||
},
|
||
}
|
||
|
||
return (
|
||
<Tooltip
|
||
{...tooltipProps}
|
||
>
|
||
|
||
<Handle
|
||
{...handleProps}
|
||
/>
|
||
</Tooltip>
|
||
)
|
||
},
|
||
},
|
||
render () {
|
||
return <Slider handle={this.handleRange} />
|
||
},
|
||
}
|
||
|
||
export default {
|
||
render () {
|
||
const style = { width: '400px', margin: '50px' }
|
||
const pStyle = { margin: '20px 0' }
|
||
|
||
return (
|
||
<div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Basic Slider</p>
|
||
<Slider onChange={log} />
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Basic Slider,`step=20`</p>
|
||
<Slider step={20} defaultValue={50} onBeforeChange={log} />
|
||
</div>
|
||
|
||
<div style={style}>
|
||
<p style={pStyle}>Basic Slider,`step=20, dots`</p>
|
||
<Slider dots step={20} defaultValue={100} onAfterChange={log} />
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Basic Slider,`step=20, dots, dotStyle={"{borderColor: 'orange'}"}, activeDotStyle={"{borderColor: 'yellow'}"}`</p>
|
||
<Slider dots step={20} defaultValue={100} onAfterChange={log} dotStyle={{ borderColor: 'orange' }} activeDotStyle={{ borderColor: 'yellow' }} />
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Slider with tooltip, with custom `tipFormatter`</p>
|
||
<SliderWithTooltip />
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Slider with custom handle and track style.<strong>(old api, will be deprecated)</strong></p>
|
||
<Slider
|
||
defaultValue={30}
|
||
maximumTrackStyle={{ backgroundColor: 'red', height: '10px' }}
|
||
minimumTrackStyle={{ backgroundColor: 'blue', height: '10px' }}
|
||
handleStyle={{
|
||
borderColor: 'blue',
|
||
height: '28px',
|
||
width: '28px',
|
||
marginLeft: '-14px',
|
||
marginTop: '-9px',
|
||
backgroundColor: 'black',
|
||
}}
|
||
/>
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Slider with custom handle and track style.<strong>(The recommended new api)</strong></p>
|
||
<Slider
|
||
defaultValue={30}
|
||
trackStyle={{ backgroundColor: 'blue', height: '10px' }}
|
||
handleStyle={{
|
||
borderColor: 'blue',
|
||
height: '28px',
|
||
width: '28px',
|
||
marginLeft: '-14px',
|
||
marginTop: '-9px',
|
||
backgroundColor: 'black',
|
||
}}
|
||
railStyle={{ backgroundColor: 'red', height: '10px' }}
|
||
/>
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Basic Slider, disabled</p>
|
||
<Slider onChange={log} disabled />
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Controlled Slider</p>
|
||
<Slider value={50} />
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Customized Slider</p>
|
||
<CustomizedSlider />
|
||
</div>
|
||
<div style={style}>
|
||
<p style={pStyle}>Slider with dynamic `min` `max`</p>
|
||
<DynamicBounds />
|
||
</div>
|
||
</div>
|
||
)
|
||
},
|
||
}
|