React 会议时段拖拽选择组件开发

前提:

类似企微会议选择的功能,之前的选择需要用户对会议时间段一个个的点击进行选择,操作非常繁琐,期望达到企微拖拽选择的一个效果。

目前的效果:

期望效果:

现在的功能是将一天的时间分为24个时间段,每个时间段又分成两个半小时,每半小时为一个最小单位,用户可以对这个单位的进行时间的占用操作。

在搜索之后并没有找到 React 相关的开源组件,于是借助了于 AntdSlider 组件的 range 功能去实现。

思路

Slider 组件的步进值设置为 100 / 48

点击某个时间块,根据下标获取当前的范围,作为初始值赋值给 Slider, 并显示组件(对组件的样式进行了一些修改,组件父容器为一整天的时间元素)

javascript 复制代码
const STEP = 100 / 48;

const [timeArea, setTimeArea] = useState<Array<number>>([]); // Slider组件值
const [controllerVisible, setControllerVisible] = useState(false);

// 根据点击区块的下标获取 Slider 组件的 value
const getTimeArea = (index: number) => {
    const area = [index * STEP, (index + 1) * STEP];
    setTimeArea(area);
}

const handleTimeClick = (item: TimeItem, index: number) => {
    getTimeArea(index);
    setControllerVisible(true);
};

const handleSliderChange = (value: Array<number>) => {
    setTimeArea(value);
};

// 获取已选择的时间段下标范围
const getSelectedIndexRange = () => {
    let leftIndex = Math.floor(timeArea[0] / STEP);
    const indexRange: Array<number> = [
      leftIndex,
      Math.floor(timeArea[1] / STEP ) - 1,
    ];
    
    return indexRange
}

return ( 
    <div>
        // ...
        <Slider
            style={{ display: controllerVisible ? "block" : "none" }}
            range
            step={STEP}
            value={timeArea}
            tooltip={{ open: false }}
            onChange={handleSliderChange}
            onAfterChange={handleAfterChange}
        />
        // ...
    </div>
)
css 复制代码
.ant-slider-rail {
    display: none;
}

.ant-slider-track {
    position: relative;
    height: 25px;
    opacity: .4;
}

.ant-slider-handle {
    top: 7px;
}

效果图

相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端