这篇文章主要介绍“Vue页面监听用户预览时间功能如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue页面监听用户预览时间功能如何实现”文章能帮助大家解决问题。
首先想到借助 Vue 页面的生命周期函数 mounted
和 destroyed
,分别在其中加入开始计时和清除计时的逻辑,通过后台的接口上报对应的培训素材的时间数据,即可达到目的。
在 data
中定义我们通过变量定义计时器,这样可以通过 this.timer
随处可访问,便于后面销毁页面的时候清除它。
duration
为时长的计数变量,初始化为 0,可根据计时器的第二个时间间隔参数,决定单位是秒还是毫秒。
export default { data() { return { timer: null, duration: 0 } }, methods: { startTimer() { this.timer = setInterval(() => { console.log("观看时长: ", this.duration) this.duration++ }, 1000) }, stopTimer() { clearInterval(this.timer) this.updateViewHistory() // 上报数据接口 }, updateViewHistory() { // 上报接口逻辑代码 .... } } }
在 startTimer
函数中我们顺便打印出 duration
变量来验证显示的时间是否正确。
定义好了开始结束的方法,我们就要开始想在哪调用它们。因为预览的页面内容不是唯一的,是根据素材的 id
来获取详情进行渲染的。如果我们把 startTimer
写在 mounted
生命周期里,那么当我们访问不同 id
的页面的时候,无法正常切换我们想要的逻辑。
所以我选择了通过监听路由中的 id
参数,来达到在预览不同页面时候来切换开始和结束的逻辑
watch: { $route: { immediate: true, handler(to, from) { if (to.params.id) this.trainingId = to.params.id this.startTimer() } } }
调用了开始计时的方法,终于我们可以在 console
的 log
中可以看到输出了当前的时长
然后也是最后一步,我们需要在页面销毁的时候调用 stopTimer
函数来清除定时器,上报数据。
由于我们的预览页面是通过
window.open
打开的独立的标签页,所以这里是通过destroyed
生命周期函数监听。如果是通过路由方法进行的跳转,那么我们需要在离开页面的时候进行销毁,方可再通过destroyed
监听到。
mounted() { window.addEventListener("beforeunload", e => this.beforeunloadHandler(e)) }, destroyed() { window.removeEventListener("beforeunload", e => this.beforeunloadHandler(e)) }
通过 window
的监听器方法来来间接调用 stopTimer
方法
methods: { beforeunloadHandler (e) { this.stopTimer() } }
这里有人会问为什么不直接在 destroyed
中调用 stopTimer
方法,这样可以分离出特有的逻辑,不与 destroyed
中其它的逻辑混在一起。提高代码的可读性和维护性。
关于“Vue页面监听用户预览时间功能如何实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。