我是pc和手机端都有这个需求,pc端用的另一种方法,pc的App.vue可以利用,但我发现uniapp就不行了,理论知识渣渣果然还得实践出真知,从网上搜了几个方法都满足不了我的需求,然后针对uniapp h5手机端琢磨出了下面这套方法,如果哪里有问题还希望大家能提出来共勉。
1.在components里面封装弹窗遮罩组件
globalPopup.vue
<template>
<div v-if="cpShow" class="informantion_mask">
<div id="yourElement" class="informantion_content">
<div class="informantion-title">
<p class="informantion-title-p">温馨提示</p>
<span class="informantion-title-span">由于您长时间未操作,已锁屏</span>
</div>
<div class="informantion-btn">
<button type="primary" @click="closeWindow">点击解锁</button>
</div>
</div>
</div>
</template>
<script>
import { getwczsp } from "@/server/au"
export default {
data() {
return {
cpShow: false,
logoutCount: 0
}
},
methods: {
//点击mask消失,由于是页面实际相当于返回
closeWindow() {
getwczsp().then(response => {
//接口获取无操作几秒就锁屏的时间
this.$globaLoutTime = Number(response.data.conValue+'0')
this.logoutCount = 0
this.cpShow = false
this.$globaTimer = setInterval(() => {
// const outTime = Number(response.data.conValue)
// 判断用户N分钟无操作就自动登出
this.logoutCount++
if (this.logoutCount > this.$globaLoutTime) { // 出现屏保
this.cpShow = true
this.$globaTimer = clearInterval(this.$globaTimer)
}
}, this.$globaLoutTime)
});
},
show(options) {
this.cpShow = options.cpShow;
},
}
}
</script>
<style lang="scss">
page {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.informantion_mask {
// width: 100%;
// height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.informantion_content {
width: 600rpx;
height: 420rpx;
overflow: hidden;
border-radius: 10rpx;
background-color: white;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-bottom: 20rpx;
}
.mask-header {
height: 400rpx;
position: relative;
background-image: url('../../static/images/doc.png');
background-repeat: no-repeat;
background-size: cover;
image {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 20rpx;
right: 20rpx;
}
}
.informantion-title {
text-align: center;
padding: 0 40rpx;
p {
font-size: 35rpx;
font-weight: bold;
line-height: 80rpx;
margin-bottom: 40rpx;
}
span {
color: #6C6C6C;
}
}
.informantion-btn {
height: 93rpx;
width: 80%;
margin: 0 auto;
}
</style>
2.main.js
// 创建一个新的 Vue 实例用于全局弹窗组件
import globalPopup from "@/components/globalPopup/globalPopup.vue"
Vue.component('globalPopup', globalPopup)
Vue.prototype.$bus = new Vue();
import {getwczsp} from "@/server/au"//这是我获取n秒的接口,看你们自己需求,如果不需要后端设定时间可以直接在$globaLoutTime设定时间
Vue.prototype.$globaLoutTime = 10*1;//到n秒锁屏
Vue.prototype.$globaLogoutCount = 0;
Vue.prototype.$globaTimer = null;
3.还是main.js,
const app = new Vue({
...App,
methods:{
getwczsp() {
getwczsp().then(response => {
// console.log('111rrr',this.$globaLoutTime)
this.$globaLoutTime = Number(response.data.conValue+'0')
if (process.env.VUE_APP_PLATFORM === 'h5') {
const dialogApp = new Vue({
render: h => h(globalPopup)
});
dialogApp.$mount();
document.body.appendChild(dialogApp.$el);
this.$globalPopup = dialogApp.$children[0];
// 监听事件总线的 showSmallDialog 事件
this.$bus.$on('showSmallDialog', options => {
this.$globalPopup.show(options);
});
} else {
// 其他平台的初始化逻辑
this.$globalPopup = this.selectComponent("#globalPopup");
// 监听事件总线的 showSmallDialog 事件
this.$bus.$on('showSmallDialog', options => {
this.$globalPopup.show(options);
});
}
if(this.$globaLogoutCount==0){
this.$globaTimer = setInterval(() => {
// const outTime = Number(response.data.conValue)
// 判断用户N分钟无操作就自动登出
this.$globaLogoutCount++
if (this.$globaLogoutCount > this.$globaLoutTime) { // 出现屏保
this.$bus.$emit('showSmallDialog', {
cpShow: true,
});
this.$globaTimer = clearInterval(this.$globaTimer)
}
}, this.$globaLoutTime)
}else{
// console.log('1111333',val)
window.addEventListener('touchstart', function(event) {
// 类似于 mouseover 的行为
console.log('Touch started over the element');
this.$globaLogoutCount=0
this.$bus.$emit('showSmallDialog', {
cpShow: false,
});
clearTimeout(this.$globaTimer)
});
}
});
},
},
mounted() {
this.getwczsp()
if (process.env.VUE_APP_PLATFORM === 'h5') {
const dialogApp = new Vue({
render: h => h(globalPopup)
});
dialogApp.$mount();
document.body.appendChild(dialogApp.$el);
this.$globalPopup = dialogApp.$children[0];
// 监听事件总线的 showSmallDialog 事件
this.$bus.$on('showSmallDialog', options => {
this.$globalPopup.show(options);
});
let _this = this
this.$nextTick(() => {
var element = document.getElementById('yourElement');
// window.addEventListener('click', function(event) {
// // 类似于 mouseover 的行为
// console.log('Touch started over the element');
// uni.showToast({
// title: `成功111148!`
// })
// _this.$bus.$emit('showSmallDialog', {
// cpShow: false,
// });
// _this.$globaLogoutCount=0
// clearTimeout(_this.$globaTimer)
// _this.getwczsp()
// });
window.addEventListener('touchstart', function(event) {
console.log('Touch started over the element');
_this.$bus.$emit('showSmallDialog', {
cpShow: false,
});
_this.$globaLogoutCount=0
clearTimeout(_this.$globaTimer)
_this.getwczsp()
});
// });
// element.addEventListener('touchmove', function(event) {
// });
});
} else {
// 其他平台的初始化逻辑
this.$globalPopup = this.selectComponent("#globalPopup");
// 监听事件总线的 showSmallDialog 事件
this.$bus.$on('showSmallDialog', options => {
this.$globalPopup.show(options);
});
}
}
})