.crop-time-body { overflow-y: auto; overflow-x: hidden; transition: height .5s; &[data-count="0"] { height: 0; } &[data-count="1"] { height: 40px; } &[data-count="2"] { height: 80px; } ... ... &[data-count="10"] { height: 380px; } }
mousemove 时事件的 currentTarget 问题
因为存在DOM事件的捕获与冒泡，而进度条上面可能有别的如时间戳、裁剪片段等元素， mousemove 事件的 currentTarget 可能会变，导致取鼠标距离进度条最左侧的 offsetX 可能有问题；而如果通过检测 currentTarget 是否为进度条也存在问题，因为鼠标移动的时候一直有个时间戳在随动，导致偶尔一段时间都触发不了进度条对应的 mousemove 事件。
解决办法就是，页面加载完成后取得进度条最左侧距页面最左侧的距离， mousemove 事件不取 offsetX ，转而取基于页面最左侧的 clientX ，然后两者相减就得到了鼠标距离进度条最左侧的像素值。代码在上文中的添加 mousemove 监听里已写。
时间格式化
因为裁剪工具很多地方需要将秒转换为 00:00:00 格式的字符串，因此写了一个工具函数：输入秒，输出一个包含 dd,HH,mm,ss 四个 key 的 Object ，每个 key 为长度为2的字符串。用ES8的 方法实现。
export default function (seconds) { const date = new Date(seconds * 1000); return { days: String(date.getUTCDate() - 1).padStart(2, '0'), hours: String(date.getUTCHours()).padStart(2, '0'), minutes: String(date.getUTCMinutes()).padStart(2, '0'), seconds: String(date.getUTCSeconds()).padStart(2, '0') }; }