上一篇文章用ZRender库画了一个大屏的顶部标题,本片文章是通过ZRender实现了一个大屏中炫酷的Loading。
我这个大屏是使用vue框架搭建的,vue是单页面应用,首次访问项目会导致有一定的白屏时间,这个白屏时间会给用户造成一种界面卡住的感觉,所以需要加一个loading界面,给用户提醒页面正在加载。
开始使用 ZRender (ecomfe.github.io)
一、ZRender库下载
npm install zrender
二、导入ZRender库
import * as zrender from "zrender";
三、组件使用思路
为了降低白屏对体验感的影响,我选择在App.vue主入口文件中引入我写的loading组件,在store中创建一个控制组件显示隐藏的属性,默认为true,当用户访问系统时,loading就会显示,等到拿到后端资源,进入路由后等待子页面触发onMounted,将store中的属性修改为false,将loading隐藏即可。
App.vue页面部分代码
<script setup>
import {useStore} from "./store/store.ts";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import HLoading from "./components/HLoading/index.vue";
const store =useStore()
</script>
<template>
<el-config-provider :locale="local">
<HLoading v-if="store.isLoading"></HLoading>
<router-view></router-view>
</el-config-provider>
</template>
Home.vue页面部分代码
<script setup>
import {useStore} from "../store/store.ts"
const store = useStore()
onMounted(()=>{
store.isLoading =false
})
</script>
四、组件代码地址
https://github.com/banyan666/Demo-vue
五、效果展示
补充:
按照我的组件使用方法在开发环境下是可以正常使用的,但是打包后运行却会报错。问题排查出来是打包后loading组件中import * as zrender form 'zrender' 导入失败无法找到这个库,但是我上一篇文章中画的大屏标题组件内部也是这样引入库的,只不过组件没有在App.vue里使用,而是在其他界面引入使用的,打包后没有任何问题;但在App.vue里引入的loading组件,loading组件里面导入zrender打包后无法找到zrender库,不知道是什么原因,感觉可能是组件和依赖的加载顺序问题,有没有大佬帮我解释一下,最后解决办法是在main.ts中直接提前导入zrender并use注册,打包后就解决了引入失败的问题。
import { createApp } from 'vue'
import './css/style.css'
import './css/theme.css'
import App from './App.vue'
import router from "./router";
import {createPinia} from "pinia";
import * as zrender from 'zrender'
const pinia = createPinia()
const app=createApp(App)
app.use(zrender)
app.use(pinia)
app.use(router)
app.mount('#app')