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

this.$emit('play',this.playingItem.startTime || 0)
}

= playingItem.endTime) { this.pause() }

{ const currentCursorOffsetX = e.clientX - containerLeft lastMouseDownOffsetX = currentCursorOffsetX // 检测是否点到了时间戳 this.timeIndicatorCheck(currentCursorOffsetX,'mousedown') })

this.timeLineContainer.addEventListener('mouseup',e => {

// 已经处于裁剪状态时，鼠标抬起，则裁剪状态取消
if (this.isCropping) {
this.stopCropping()
return
}

const currentCursorOffsetX = this.getFormattedOffsetX(e.clientX - containerLeft)
// mousedown与mouseup位置不一致，则不认为是点击,直接返回
if (Math.abs(currentCursorOffsetX - lastMouseDownOffsetX) > 3) {
return
}

// 更新当前鼠标指向的时间
this.currentCursorTime = currentCursorOffsetX * this.timeToPixelRatio

// 鼠标点击新增裁剪片段
if (!this.isCropping) {
this.addNewCropItemInSlider()

// 新操作位置为数组最后一位
this.startCropping(this.cropItemList.length - 1)
}
})

{ throttle(() => { const currentCursorOffsetX = e.clientX - containerLeft // mousemove范围检测 if (currentCursorOffsetX < 0 || currentCursorOffsetX > containerWidth) { this.isCursorIn = false // 鼠标拖拽状态到达边界直接触发mouseup状态 if (this.isCropping) { this.stopCropping() this.timeIndicatorCheck(currentCursorOffsetX < 0 ? 0 : containerWidth,'mouseup') } return } else { this.isCursorIn = true }

this.currentCursorTime = currentCursorOffsetX * this.timeToPixelRatio
this.currentCursorOffsetX = currentCursorOffsetX
// 时间戳检测
this.timeIndicatorCheck(currentCursorOffsetX,'mousemove')
// 时间戳移动检测
this.timeIndicatorMove(currentCursorOffsetX)
},10,true)()
})

// 鼠标移动，重设hover状态
this.startTimeIndicatorHoverIndex = -1
this.endTimeIndicatorHoverIndex = -1
this.startTimeIndicatorDraggingIndex = -1
this.endTimeIndicatorDraggingIndex = -1
this.cropItemHoverIndex = -1

this.cropItemList.forEach((item,index) => {
if (currentCursorOffsetX >= item.startTimeIndicatorOffsetX
&& currentCursorOffsetX <= item.endTimeIndicatorOffsetX) {
this.cropItemHoverIndex = index
}

// 默认始末时间戳在一起时优先选中截止时间戳
if (isCursorClose(item.endTimeIndicatorOffsetX,currentCursorOffsetX)) {
this.endTimeIndicatorHoverIndex = index
// 鼠标放下，开始裁剪
if (mouseEvent === 'mousedown') {
this.endTimeIndicatorDraggingIndex = index
this.currentEditingIndex = index
this.isCropping = true
}
}

else if (isCursorClose(item.startTimeIndicatorOffsetX,currentCursorOffsetX)) {
this.startTimeIndicatorHoverIndex = index
// 鼠标放下，开始裁剪
if (mouseEvent === 'mousedown') {
this.startTimeIndicatorDraggingIndex = index
this.currentEditingIndex = index
this.isCropping = true
}
}
})
},timeIndicatorMove (currentCursorOffsetX) {
// 裁剪状态，随动时间戳
if (this.isCropping) {
const currentEditingIndex = this.currentEditingIndex
const startTimeIndicatorDraggingIndex = this.startTimeIndicatorDraggingIndex
const endTimeIndicatorDraggingIndex = this.endTimeIndicatorDraggingIndex
const currentCursorTime = this.currentCursorTime

let currentItem = this.cropItemList[currentEditingIndex]
// 操作起始位时间戳
if (startTimeIndicatorDraggingIndex > -1 && currentItem) {
// 已到截止位时间戳则直接返回
if (currentCursorOffsetX > currentItem.endTimeIndicatorOffsetX) {
return
}
currentItem.startTimeIndicatorOffsetX = currentCursorOffsetX
currentItem.startTime = currentCursorTime
}

// 操作截止位时间戳
if (endTimeIndicatorDraggingIndex > -1 && currentItem) {
// 已到起始位时间戳则直接返回
if (currentCursorOffsetX < currentItem.startTimeIndicatorOffsetX) {
return
}
currentItem.endTimeIndicatorOffsetX = currentCursorOffsetX
currentItem.endTime = currentCursorTime
}
this.updateCropItem(currentItem,currentEditingIndex)
}
}

// 1. 依据startTime由小到大排序
cropItemList = cropItemList.sort(function (item1,item2) {
return item1.startTime - item2.startTime
})

let tempCropItemList = []
let startTime = cropItemList[0].startTime
let endTime = cropItemList[0].endTime
const lastIndex = cropItemList.length - 1

// 遍历，删除重复片段
cropItemList.forEach((item,index) => {
// 遍历到最后一项，直接写入
if (lastIndex === index) {
tempCropItemList.push({
startTime: startTime,endTime: endTime,startTimeArr: formatTime.getFormatTimeArr(startTime),endTimeArr: formatTime.getFormatTimeArr(endTime),})
return
}
// currentItem片段包含item
if (item.endTime <= endTime && item.startTime >= startTime) {
return
}
// currentItem片段与item有重叠
if (item.startTime <= endTime && item.endTime >= endTime) {
endTime = item.endTime
return
}
// currentItem片段与item无重叠,向列表添加一项，更新记录参数
if (item.startTime > endTime) {
tempCropItemList.push({
startTime: startTime,})
// 标志量移到当前item
startTime = item.startTime
endTime = item.endTime
}
})

return tempCropItemList
}

总结

写博客比写代码难多了，感觉很混乱的写完了这个博客。

几个小细节 列表增删时的高度动画

UI提了个需求，最多展示10条裁剪片段，超过了之后就滚动，还得有增删动画。本来以为直接设个 max-height 完事，结果发现

CSS的 transition 动画只有针对绝对值的height有效 ，这就有点小麻烦，因为裁剪条数是变化的，那么高度也是在变化的。设绝对值该怎么办呢。。。

这里通过HTML中tag的 attribute 属性 data-count 来告诉CSS我现在有几条裁剪，然后让CSS根据 data-count 来设置列表高度。