而且，第1条最右侧是添加按钮，而剩下的最右侧都是删除按钮。所以，我们 将第1条单独提出来写，然后将
cropItemList 逆序生成一个
renderList 并循环
renderList 的
0 -> listLength - 2 条即可。
<template v-for="(item, index) in renderList">
<div v-if="index < listLength -1"
:key="index"
class="crop-time-item">
...
...
</div>
</template>下图为最终效果：
时分秒输入
这个其实就是写三个
input 框，设
type="text" (设成
type=number 输入框右侧会有上下箭头)，然后通过监听input事件来保证输入的正确性并更新数据。监听focus事件来确定是否需要在
cropItemList 为空时主动添加一条数据。
<div class="time-input">
<input type="text"
:value="renderList[listLength -1] && renderList[listLength -1].startTimeArr[0]"
@input="startTimeChange($event, 0, 0)"
@focus="inputFocus()"/>
:
<input type="text"
:value="renderList[listLength -1] && renderList[listLength -1].startTimeArr[1]"
@input="startTimeChange($event, 0, 1)"
@focus="inputFocus()"/>
:
<input type="text"
:value="renderList[listLength -1] && renderList[listLength -1].startTimeArr[2]"
@input="startTimeChange($event, 0, 2)"
@focus="inputFocus()"/>
</div>播放片段
点击播放按钮时会通过
playingItem 记录当前播放的片段，然后向上层发出
play 事件并带上播放起始时间。同样还有
pause 和
stop 事件，来控制媒体暂停与停止。
<CropTool :duration="duration"
:playing="playing"
:currentPlayingTime="currentTime"
@play="playVideo"
@pause="pauseVideo"
@stop="stopVideo"/>
/**
* 播放选中片段
* @param index
*/
playSelectedClip: function (index) {
if (!this.listLength) {
console.log('无裁剪片段')
return
}
this.playingItem = this.cropItemList[index] this.playingIndex = index
