一个Vue视频媒体多段裁剪组件的实现示例

clientX

，然后两者相减就得到了鼠标距离进度条最左侧的像素值。代码在上文中的添加

mousemove

监听里已写。

时间格式化

因为裁剪工具很多地方需要将秒转换为

00:00:00

格式的字符串，因此写了一个工具函数：输入秒，输出一个包含

dd,HH,mm,ss

四个

key

的

Object

，每个

key

为长度为2的字符串。用ES8的 String.prototype.padStart() 方法实现。

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')
 };
}