playVideo (time) {
this.seekVideo(time)
this.$refs.video.play()
},
pauseVideo () {
this.$refs.video.pause()
},
stopVideo () {
this.$refs.video.pause()
this.$refs.video.currentTime = 0
},
},
}
</script>
总结
写博客比写代码难多了，感觉很混乱的写完了这个博客。
几个小细节 列表增删时的高度动画
UI提了个需求，最多展示10条裁剪片段，超过了之后就滚动，还得有增删动画。本来以为直接设个
max-height 完事，结果发现CSS的
transition 动画只有针对绝对值的height有效 ，这就有点小麻烦，因为裁剪条数是变化的，那么高度也是在变化的。设绝对值该怎么办呢。。。这里通过HTML中tag的
attribute 属性
data-count 来告诉CSS我现在有几条裁剪，然后让CSS根据
data-count 来设置列表高度。
<!--超过10条数据也只传10，让列表滚动-->
<div
class="crop-time-body"
:data-count="listLength > 10 ? 10 : listLength -1">
</div>
.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 ，转而取基于页面最左侧的
