<script>
let read = ''
export default{
data () { // 这里存放数据
return {
timer: '', // 定时器
currentTime: 0, // 开始时间
readTime : 0 // 阅读时间
};
},
// 监听属性 类似于data概念
computed: {
userCheck(){ // 同步
if (this.$store.getters.User == ''){
this.disableTP()
} else {
this.enableTP()
}
}
},
// 监控data中的数据变化
watch: {
// 监听computed中的useChange值
userCheck(){
this.enableTP()
}
// '$store.getters.User':'enableTP'
},
methods: {
requestTP () {
this.$axios.get(url + this.id, {
params: {
articleTypeName: this.name
}
}) // .then(data => {console.log(data)})
},
enableTP () { // 启用浏览
this.printViolet('检测用户登录状态...' + this.$store.getters.User)
if (this.$store.getters.User) {
this.printViolet('检测浏览器状态...' + document.visibilityState === 'hidden')
if (document.visibilityState != 'hidden') {
this.printViolet('检测计时器状态...' + (this.timer == null || this.timer === '')) // || "undefined" == typeof this.timer
if (this.timer == null || this.timer === '') {
this.timer = setInterval(this.startTimer, 1000);
}
}
}
},
// 关闭浏览
disableTP () {
clearInterval(this.timer) // 关闭定时器,需要请求
this.timer = '' // 清楚计时器后,计时器的id还在,所以需要赋空
},
// 浏览启用判定
startTimer () {
this.currentTime++
if (this.readTime == null || "undefined" == typeof this.readTime || this.readTime == 0) {
this.disableTP()
}
if (this.currentTime >= this.readTime) {
this.disableTP() // 关闭
this.requestTP() // 触发
}
},
// 浏览开关
switchTP(){
if(document.visibilityState == 'hidden'){
this.disableTP()
}else{
this.enableTP()
}
},
// 状态
stateTP () {
document.addEventListener("visibilitychange", this.switchTP)
},
// 打印绿色提示消息
printViolet (str) {
console.log('%c%s', 'color:green', str)
},
// 判断是否存在
isExistObject (obj) {
return obj == null || "undefined" == typeof obj || obj === ''
},
// 判断是否为空
isNullObject (obj) {
return obj == null || "undefined" == typeof obj
},
// 彩色打印
printColor (str) {
let color = ['violet', 'red', 'green', 'blue', 'yellow']
console.log('%c%s', 'color:' + color[2], str)
}
}
}
</script>
vue监控-2
最新推荐文章于 2024-05-19 21:35:36 发布