Skip to content

Commit c32f468

Browse files
jqmin19jqmin19
committed
添加loading，解决 elm 中文显示异常问题
1 parent d802230 commit c32f468

File tree

7 files changed

+139
-43
lines changed

7 files changed

+139
-43
lines changed

‎index.html

+71-1
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,13 @@
1616
body,
1717
#app {
1818
height: 100%;
19+
}
20+
21+
* {
1922
margin: 0;
2023
padding: 0;
24+
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
25+
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
2126
}
2227

2328
.preload {
@@ -43,12 +48,13 @@
4348
color: #fff;
4449
letter-spacing: 5px;
4550
font-weight: bold;
51+
margin-bottom: 30px;
4652
}
4753

4854
.preload .title {
4955
color: #fff;
5056
font-size: 14px;
51-
margin-bottom: 10px;
57+
margin: 30px 0 20px 0;
5258
}
5359

5460
.preload .sub-title {
@@ -66,13 +72,77 @@
6672
color: #ababab;
6773
text-decoration: none;
6874
}
75+
76+
.preload .loading {
77+
height: 30px;
78+
width: 30px;
79+
border-radius: 30px;
80+
border: 7px solid currentColor;
81+
border-bottom-color: #2f3447 !important;
82+
position: relative;
83+
animation: r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67),
84+
bc 2s infinite ease-in;
85+
transform: rotate(0deg);
86+
}
87+
88+
@keyframes r {
89+
from {
90+
transform: rotate(0deg);
91+
}
92+
to {
93+
transform: rotate(360deg);
94+
}
95+
}
96+
97+
.preload .loading::after,
98+
.preload .loading::before {
99+
content: "";
100+
display: inline-block;
101+
position: absolute;
102+
bottom: -2px;
103+
height: 7px;
104+
width: 7px;
105+
border-radius: 10px;
106+
background-color: currentColor;
107+
}
108+
109+
.preload .loading::after {
110+
left: -1px;
111+
}
112+
113+
.preload .loading::before {
114+
right: -1px;
115+
}
116+
117+
@keyframes bc {
118+
0% {
119+
color: #689cc5;
120+
}
121+
122+
25% {
123+
color: #b3b7e2;
124+
}
125+
126+
50% {
127+
color: #93dbe9;
128+
}
129+
130+
75% {
131+
color: #abbd81;
132+
}
133+
134+
100% {
135+
color: #689cc5;
136+
}
137+
}
69138
</style>
70139
</head>
71140
<body>
72141
<div id="app">
73142
<div class="preload">
74143
<div class="container">
75144
<p class="name">COOL-ADMIN</p>
145+
<div class="loading"></div>
76146
<p class="title">正在加载资源...</p>
77147
<p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
78148
</div>

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "front-next",
3-
"version": "0.5.4",
3+
"version": "0.6.0",
44
"scripts": {
55
"dev": "vite",
66
"build": "vite build",
@@ -11,13 +11,13 @@
1111
"dependencies": {
1212
"array.prototype.flat": "^1.2.4",
1313
"axios": "^0.21.1",
14-
"cl-admin-crud-vue3": "^0.4.0",
14+
"cl-admin-crud-vue3": "^0.5.3",
1515
"clipboard": "^2.0.8",
1616
"clone-deep": "^4.0.1",
1717
"codemirror": "^5.62.0",
1818
"core-js": "^3.6.5",
1919
"echarts": "^5.0.2",
20-
"element-plus": "1.0.2-beta.45",
20+
"element-plus": "^1.0.2-beta.65",
2121
"file-saver": "^2.0.5",
2222
"glob": "^7.1.6",
2323
"js-beautify": "^1.13.5",

‎src/App.vue

+50-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,55 @@
11
<template>
2-
<div id="app">
2+
<el-config-provider :locale="locale">
3+
<div class="preload" v-if="loading">
4+
<div class="container">
5+
<p class="name">COOL-ADMIN</p>
6+
<div class="loading"></div>
7+
<p class="title">正在加载菜单...</p>
8+
<p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
9+
</div>
10+
11+
<div class="footer">
12+
<a href="https://cool-js.com/" target="_blank"> https://cool-js.com </a>
13+
</div>
14+
</div>
15+
316
<router-view />
4-
</div>
17+
</el-config-provider>
518
</template>
619

20+
<script lang="ts">
21+
import { computed, defineComponent } from "vue";
22+
import { ElConfigProvider } from "element-plus";
23+
import zhCn from "element-plus/lib/locale/lang/zh-cn";
24+
import { useStore } from "vuex";
25+
26+
export default defineComponent({
27+
components: {
28+
[ElConfigProvider.name]: ElConfigProvider
29+
},
30+
31+
setup() {
32+
const store = useStore();
33+
const locale = zhCn;
34+
const loading = computed(() => store.getters.appLoading);
35+
36+
return {
37+
locale,
38+
loading
39+
};
40+
}
41+
});
42+
</script>
43+
744
<style lang="scss" src="./assets/css/index.scss"></style>
45+
46+
<style lang="scss" scoped>
47+
.preload {
48+
position: fixed;
49+
left: 0;
50+
top: 0;
51+
height: 100%;
52+
width: 100%;
53+
z-index: 9999;
54+
}
55+
</style>

‎src/cool/modules/base/pages/login/index.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<img class="logo" src="../../static/images/logo.png" alt="" />
55
<p class="desc">COOL ADMIN是一款快速开发后台权限管理系统</p>
66

7-
<el-form class="form" size="medium" :disabled="saving">
7+
<el-form label-position="top" class="form" size="medium" :disabled="saving">
88
<el-form-item label="用户名">
99
<el-input
1010
v-model="form.username"
@@ -46,7 +46,7 @@
4646
</el-form-item>
4747
</el-form>
4848

49-
<el-button round size="mini" class="submit-btn" :loading="saving" @click="toLogin"
49+
<el-button round size="small" class="submit-btn" :loading="saving" @click="toLogin"
5050
>登录</el-button
5151
>
5252
</div>
@@ -216,8 +216,7 @@ export default defineComponent({
216216
217217
.submit-btn {
218218
margin-top: 40px;
219-
border-radius: 30px;
220-
padding: 10px 40px;
219+
padding: 9px 40px;
221220
color: #000;
222221
}
223222
}

‎src/cool/modules/base/store/app.ts

-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import store from "store";
22
import { deepMerge, getBrowser } from "/@/core/utils";
33
import { app } from "/@/config/env";
4-
import { ElLoading } from "element-plus";
54

65
const browser = getBrowser();
76

@@ -28,10 +27,6 @@ const getters = {
2827
const actions = {
2928
async appLoad({ getters, dispatch, commit }: any) {
3029
if (getters.token) {
31-
const loader = ElLoading.service({
32-
text: "加载配置中"
33-
});
34-
3530
commit("SHOW_LOADING");
3631

3732
// 读取菜单权限
@@ -40,7 +35,6 @@ const actions = {
4035
dispatch("userInfo");
4136

4237
commit("HIDE_LOADING");
43-
loader.close();
4438
}
4539
}
4640
};

‎src/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import "./mock";
1515
// element-plus
1616
import ElementPlus from "element-plus";
1717
import "./assets/css/element-variables.scss";
18-
import locale from "element-plus/lib/locale/lang/zh-cn";
1918

2019
// mitt
2120
import mitt from "mitt";
@@ -33,12 +32,13 @@ bootstrap(app)
3332
// // 事件通讯
3433
app.provide("mitt", mitt());
3534

36-
app.use(store).use(router).use(ElementPlus, { locale }).mount("#app");
35+
app.use(store).use(router).use(ElementPlus).mount("#app");
3736
})
3837
.catch((err: string) => {
3938
console.error(`COOL-ADMIN 启动失败`, err);
4039
});
4140

41+
// 应用加载
4242
store.dispatch("appLoad");
4343

4444
// @ts-ignore

‎yarn.lock

+10-25
Original file line numberDiff line numberDiff line change
@@ -433,7 +433,7 @@
433433
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
434434
integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
435435

436-
"@types/lodash@^4.14.161", "@types/lodash@^4.14.168":
436+
"@types/lodash@^4.14.168":
437437
version "4.14.168"
438438
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
439439
integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
@@ -1082,14 +1082,14 @@ change-case@^4.1.2:
10821082
optionalDependencies:
10831083
fsevents "~2.3.1"
10841084

1085-
cl-admin-crud-vue3@^0.4.0:
1086-
version "0.4.1"
1087-
resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.4.1.tgz#87ea4af54c5bb619f6766b04961367ab92f22bf5"
1088-
integrity sha1-h+pK9Uxbthn2dmsElhNnq5LyK/U=
1085+
cl-admin-crud-vue3@^0.5.3:
1086+
version "0.5.3"
1087+
resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.5.3.tgz?cache=0&sync_timestamp=1627885610424&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcl-admin-crud-vue3%2Fdownload%2Fcl-admin-crud-vue3-0.5.3.tgz#3e8cde7a0fd0a9512c74d5ebc53fb54e8575e787"
1088+
integrity sha1-Pozeeg/QqVEsdNXrxT+1ToV154c=
10891089
dependencies:
10901090
array.prototype.flat "^1.2.4"
10911091
core-js "^3.6.5"
1092-
element-plus "^1.0.2-beta.40"
1092+
element-plus "^1.0.2-beta.65"
10931093
merge "^2.1.1"
10941094
mitt "^2.1.0"
10951095
vue "3.0.11"
@@ -1525,27 +1525,12 @@ electron-to-chromium@^1.3.723:
15251525
resolved "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.782.tgz?cache=0&sync_timestamp=1626833041411&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.782.tgz#522740fe6b4b5255ca754c68d9c406a17b0998e2"
15261526
integrity sha1-UidA/mtLUlXKdUxo2cQGoXsJmOI=
15271527

1528-
element-plus@1.0.2-beta.45:
1529-
version "1.0.2-beta.45"
1530-
resolved "https://registry.nlark.com/element-plus/download/element-plus-1.0.2-beta.45.tgz?cache=0&sync_timestamp=1625823476329&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felement-plus%2Fdownload%2Felement-plus-1.0.2-beta.45.tgz#d7d84d284ead4f9de5aa7289b9a2af4b7f109a1e"
1531-
integrity sha1-19hNKE6tT53lqnKJuaKvS38Qmh4=
1532-
dependencies:
1533-
"@popperjs/core" "^2.4.4"
1534-
"@types/lodash" "^4.14.161"
1535-
async-validator "^3.4.0"
1536-
dayjs "1.x"
1537-
lodash "^4.17.20"
1538-
mitt "^2.1.0"
1539-
normalize-wheel "^1.0.1"
1540-
resize-observer-polyfill "^1.5.1"
1541-
1542-
element-plus@^1.0.2-beta.40:
1543-
version "1.0.2-beta.40"
1544-
resolved "https://registry.npm.taobao.org/element-plus/download/element-plus-1.0.2-beta.40.tgz#30fc9b161496ae587fab86235c80b728ea43d909"
1545-
integrity sha1-MPybFhSWrlh/q4YjXIC3KOpD2Qk=
1528+
element-plus@^1.0.2-beta.65:
1529+
version "1.0.2-beta.65"
1530+
resolved "https://registry.nlark.com/element-plus/download/element-plus-1.0.2-beta.65.tgz#e1ff997fe395dd2e31a16517970058bc4d45fb3c"
1531+
integrity sha1-4f+Zf+OV3S4xoWUXlwBYvE1F+zw=
15461532
dependencies:
15471533
"@popperjs/core" "^2.4.4"
1548-
"@types/lodash" "^4.14.161"
15491534
async-validator "^3.4.0"
15501535
dayjs "1.x"
15511536
lodash "^4.17.20"

0 commit comments

Comments
 (0)