Vue网页屏保

Vue网页屏保

在vue项目中，假如项目长时间未操作需要弹出屏幕保护程序，以下为网页屏保结果，看板内容为连接的资源。

屏保组件

1. <template>
2.   <div v-if="isActive" class="screensaver" @click="disableScreensaver">
3.     <div class="carousel">
4.       <div
5.         class="carousel-slide"
6.         v-for="(url, index) in urls"
7.         :key="index"
8.         :style="{
9.           transform: `translateX(-${currentIndex * 100}%)`,
10.           transition: 'transform 0.5s ease-in-out'
11.         }"
12.       >
13.         <iframe ref="iframe" :src="url" class="carousel-slide-iframe"></iframe>
14.       </div>
15.     </div>
16.     <h1 class="message">屏保活动中！点击此处或敲击键盘任意键退出。</h1>
17.   </div>
18. </template>
20. <script>
21. const kanbanUrl = window._CONFIG['kanbanURL']
22. export default {
23.   data() {
24.     return {
25.       isActive: false,
26.       currentIndex: 0,
27.       carouselInterval: null,
28.       carouselIntervalTime: 30000,
29.       urls: [
30.               // 这里URL可更换为自己需要的资源地址
31.         kanbanUrl+'/index.html',
32.         kanbanUrl+'/indexWip.html',
33.         kanbanUrl+'/AutelLine-chars.html',
34.       ],
35.     };
36.   },
37.   methods: {
38.     activateScreensaver() {
39.       let screensaverFlag=window.localStorage.getItem("screensaverFlag")
40.       if(this.isActive||(screensaverFlag===false||screensaverFlag==='false')){
41.         // 如果是活动状态不重复触发 || 设置不启用屏保不触发
42.         return
43.       }
44.       this.isActive = true;
45.       this.carouselIntervalTime=window.localStorage.getItem("carouselIntervalTime")
46.       if(this.carouselIntervalTime==null||this.carouselIntervalTime===""){
47.         this.carouselIntervalTime = 30000
48.       }
49.       const element = document.documentElement; // 获取整个文档的元素
51.       if (element.requestFullscreen) { // 标准写法
52.         element.requestFullscreen();
53.       } else if (element.mozRequestFullScreen) { // Firefox 浏览器
54.         element.mozRequestFullScreen();
55.       } else if (element.webkitRequestFullscreen) { // Chrome 和 Safari
56.         element.webkitRequestFullscreen();
57.       } else if (element.msRequestFullscreen) { // IE11
58.         element.msRequestFullscreen();
59.       }
60.       this.startCarousel();
61.     },
62.     disableScreensaver() {
63.       this.isActive = false;
64.       clearInterval(this.carouselInterval);
65.       window.removeEventListener('mousemove', this.handleMouseMove);
66.       if (document.exitFullscreen) { // 标准写法
67.         document.exitFullscreen();
68.       } else if (document.mozCancelFullScreen) { // Firefox 浏览器
69.         document.mozCancelFullScreen();
70.       } else if (document.webkitExitFullscreen) { // Chrome 和 Safari
71.         document.webkitExitFullscreen();
72.       } else if (document.msExitFullscreen) { // IE11
73.         document.msExitFullscreen();
74.       }
75.     },
76.     startCarousel() {
77.       clearInterval(this.carouselInterval);
78.       if (this.carouselIntervalTime == null || this.carouselIntervalTime === '' || this.carouselIntervalTime < 5000) {
79.         this.carouselIntervalTime = 5000
80.       }
81.       this.carouselInterval = setInterval(() => {
82.         this.currentIndex = (this.currentIndex + 1) % this.urls.length;
83.       }, this.carouselIntervalTime); // 每30秒切换
84.     },
85.   },
86.   mounted() {
87.     // this.activateScreensaver(); // 激活屏保，确保其开始运行
88.   },
89.   beforeDestroy() {
90.     clearInterval(this.carouselInterval);
91.   },
92. };
93. </script>
95. <style scoped>
96. .screensaver {
97.   position: fixed;
98.   top: 0;
99.   left: 0;
100.   width: 100%;
101.   height: 100%;
102.   background-color: rgba(0, 0, 0, 0.8);
103.   color: white;
104.   display: flex;
105.   flex-direction: column;
106.   justify-content: center;
107.   align-items: center;
108.   z-index: 9999;
109.   font-family: Arial, sans-serif;
110. }
112. .carousel {
113.   width: 100%;
114.   height: 100%;
115.   display: flex;
116.   overflow: hidden;
117. }
119. .carousel-slide {
120.   min-width: 100%;
121.   height: 100%;
122.   display: flex;
123.   justify-content: center;
124.   align-items: center;
125. }
127. .carousel-slide iframe {
128.   width: 100%;
129.   height: 100%;
130.   border: none;
131. }
132. .message {
133.   font-size: 2em;
134.   margin-top: 5px;
135.   text-align: center;
136.   color: #c0c0c0;
137.   cursor: pointer;
138.   position: relative;
139.   overflow: hidden;
140.   padding: 0 10px;
141.   border-radius: 20px;
142. }
144. .message::before {
145.   content: '';
146.   position: absolute;
147.   top: 0;
148.   left: -100%;
149.   width: 100%;
150.   height: 100%;
151.   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); /* 可调整透明度 */
152.   animation: shine 5s infinite;
153.   pointer-events: none; /* 使点击事件穿透 */
154. }
156. @keyframes shine {
157.   0% {
158.     left: -100%;
159.   }
160.   50% {
161.     left: 100%;
162.   }
163.   100% {
164.     left: 100%;
165.   }
166. }
168. </style>

复制代码

调用

1. <template>
2.   <a-config-provider :locale="locale">
3.     <div id="app" @mousemove="mouseScreensaver" @keydown="mouseScreensaver">
4.       <router-view/>
5.       <Screensaver ref="Screensaver" />
6.     </div>
7.   </a-config-provider>
8. </template>
10. <script>
11. import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
12. import enquireScreen from '@/utils/device';
13. import Screensaver from '@/components/Screensaver/Screensaver.vue';
15. export default {
16.   components: {
17.     Screensaver,
18.   },
19.   data() {
20.     return {
21.       locale: zhCN,
22.       timeout: null, // 用于存储定时器
23.       idleTime: 5000*60*5, // 5分钟，单位为毫秒
24.     };
25.   },
26.   created() {
27.     // 创建页面时启动定时器
28.     this.setupIdleTimer();
29.     window.addEventListener('mouseup', this.mouseScreensaver);
30.     window.addEventListener('mousemove', this.mouseScreensaver);
31.     window.addEventListener('keydown', this.keydownScreensaver);
33.     let that = this;
34.     enquireScreen((deviceType) => {
35.       // tablet
36.       if (deviceType === 0) {
37.         that.$store.commit('TOGGLE_DEVICE', 'mobile');
38.         that.$store.dispatch('setSidebar', false);
39.       }
40.       // mobile
41.       else if (deviceType === 1) {
42.         that.$store.commit('TOGGLE_DEVICE', 'mobile');
43.         that.$store.dispatch('setSidebar', false);
44.       } else {
45.         that.$store.commit('TOGGLE_DEVICE', 'desktop');
46.         that.$store.dispatch('setSidebar', true);
47.       }
48.     });
49.   },
50.   beforeDestroy() {
51.     // 销毁页面时清除定时器
52.     clearTimeout(this.timeout); // 清理定时器
53.     this.timeout = null
54.     let that=this
55.     window.removeEventListener('mouseup', this.mouseScreensaver);
56.     window.removeEventListener('mousemove', this.mouseScreensaver);
57.     window.removeEventListener('keydown', this.keydownScreensaver);
58.   },
59.   methods: {
60.     /**
61.      * 设置新的延迟触发屏保
62.      */
63.     setupIdleTimer() {
64.       let screensaverFlag = window.localStorage.getItem('screensaverFlag')
65.       if (screensaverFlag !== false || screensaverFlag !== 'false') {
66.         let screensaverTime = window.localStorage.getItem('screensaverTime')
67.         if (screensaverTime == null) {
68.           screensaverTime = this.idleTime
69.         }
70.         this.timeout = setTimeout(() => {
71.           this.activateScreensaver();
72.         }, screensaverTime);
73.       }
74.     },
75.     /**
76.      * 触发鼠标活动屏保定时重新计算
77.      */
78.     mouseScreensaver() {
79.       clearTimeout(this.timeout); // 清除当前定时器
80.       this.timeout = null
81.       this.setupIdleTimer(); // 再次设置定时器
82.     },
83.     /**
84.      * 触发键盘活动屏保定时重新计算
85.      */
86.     keydownScreensaver() {
87.       if(this.$refs.Screensaver.isActive){
88.         // 如果是显示状态
89.         this.$refs.Screensaver.disableScreensaver() // 销毁屏保
90.       }
91.       clearTimeout(this.timeout); // 清除当前定时器
92.       this.timeout = null
93.       this.setupIdleTimer(); // 再次设置定时器that.mouseScreensaver()
94.     },
95.     /**
96.      * 显示屏保
97.      */
98.     activateScreensaver() {
99.       this.$refs.Screensaver.activateScreensaver();
100.     },
101.   },
102. };
103. </script>
105. <style>
106. #app {
107.   height: 100%;
108. }
109. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。