fixbug

src/views/login/index.vue

@@ -3,7 +3,7 @@ import { NButton, } from 'naive-ui'
 import { useRouter, } from 'vue-router'
 import { Local } from "@/utils/storage/storage";
 import { loginApi, getCode, getMenuApi } from "@/api/api";
-import { ref, onMounted,onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 const router = useRouter()
 const ms = useMessage()
 // 登录方式
@@ -20,6 +20,23 @@ const printTextWrod = ref(["FONCHAT", "Let's Chat", "Let's Create", "Let's Go"])
 const backgroundColor = ref(['red', 'blue', '#f3f4f6', '#f3f4f6'])
 let printInterval = null
 onMounted(() => {
+  textEffect()
+})
+onUnmounted(() => {
+  clearInterval(printInterval)
+})
+// 解决离开页面文字堆叠
+document.addEventListener('visibilitychange', function () {
+  if (document.hidden) {
+    clearInterval(printInterval)
+    document.querySelector('#chat').innerText = ''
+  } else {
+    clearInterval(printInterval)
+    textEffect()
+  }
+})
+// 文字特效逻辑
+function textEffect() {
   printText(printTextWrod.value[0])
   let index = 1
   printInterval = setInterval(() => {
@@ -30,10 +47,7 @@ onMounted(() => {
     index++
     document.querySelector('#chat').innerText = ''
   }, 2500)
-})
-onUnmounted(() => {
-  clearInterval(printInterval)
-})
+}
 function login() {
   router.push('/')
 }