1.0.3 • Published 12 months ago
react-slider-times v1.0.3
react-slider-times
react-slider-times,是一款基于react开发的卡尺滑动时间段选取组件,界面简洁大方,支持时间段间隔、时长设置。
install
npm i react-slider-times
usage
import SliderTime from 'react-slider-time';
import 'react-slider-times/dist/sliderTime.css';
cosnt sliderTimeRef = useRef(null);
<SliderTime interval={10} space={120} onChange={times => {}} ref={sliderTimeRef}/>
props
- interval: 时间段之间的间隔分钟数。
- space: 时间段的时长分钟时。
- onChange: 首次的初始时间或改变时间后回调,参数tiems是当前改变后返回的时间段数据。
methods
组件下的方法调用:
- addTimeSlice:sliderTimeRef.current?.addTimeSlice();
- removeTimeSlice:sliderTimeRef.current?.removeTimeSlice(id); // 参数:当前时间段的id
- changeTimeSlice:sliderTimeRef.current?.changeTimeSlice(id, '01:20', '04:20'); // 参数:当前修改时间段id,修改成的时间段数组开始时间, 结束时间