diff --git a/src/views/login/index.vue b/src/views/login/index.vue index bc63e60..3ee3205 100644 --- a/src/views/login/index.vue +++ b/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('/') }