canrd-outside / order-erp-front · Commits

Commit a530ec867bf044346c6fe3c359f6b3212c4110dc

Authored by nsk
Committed by GitHub
1 parent d6f65d47

fix(Loading): add theme prop, The repair background prop does not tak… (#1271) 

* fix(Loading): add theme prop, The repair background prop does not take effect

* fix(AppLogo): fix title line height
Inline Side-by-side
Showing 3 changed files with 24 additions and 3 deletions
src/components/Application/src/AppLogo.vue
  View file @a530ec8
@@ -87,6 +87,7 @@ @@ -87,6 +87,7 @@
87 font-size: 16px; 87 font-size: 16px;
88 font-weight: 700; 88 font-weight: 700;
89 transition: all 0.5s; 89 transition: all 0.5s;
  90 + line-height: normal;
90 } 91 }
91 } 92 }
92 </style> 93 </style>
src/components/Loading/src/Loading.vue
  View file @a530ec8
1 <template> 1 <template>
2 - <section class="full-loading" :class="{ absolute }" v-show="loading"> 2 + <section
  3 + class="full-loading"
  4 + :class="{ absolute, [theme]: !!theme }"
  5 + :style="[background ? `background-color: ${background}` : '']"
  6 + v-show="loading"
  7 + >
3 <Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" /> 8 <Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
4 </section> 9 </section>
5 </template> 10 </template>
@@ -35,6 +40,9 @@ @@ -35,6 +40,9 @@
35 background: { 40 background: {
36 type: String as PropType<string>, 41 type: String as PropType<string>,
37 }, 42 },
  43 + theme: {
  44 + type: String as PropType<'dark' | 'light'>,
  45 + },
38 }, 46 },
39 }); 47 });
40 </script> 48 </script>
@@ -60,8 +68,12 @@ @@ -60,8 +68,12 @@
60 } 68 }
61 69
62 html[data-theme='dark'] { 70 html[data-theme='dark'] {
63 - .full-loading { 71 + .full-loading:not(.light) {
64 background-color: @modal-mask-bg; 72 background-color: @modal-mask-bg;
65 } 73 }
66 } 74 }
  75 +
  76 + .full-loading.dark {
  77 + background-color: @modal-mask-bg;
  78 + }
67 </style> 79 </style>
src/views/demo/comp/loading/index.vue
  View file @a530ec8
@@ -6,7 +6,13 @@ @@ -6,7 +6,13 @@
6 全屏 Loading 6 全屏 Loading
7 </a-button> 7 </a-button>
8 <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button> 8 <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
9 - <Loading :loading="loading" :absolute="absolute" :tip="tip" /> 9 + <Loading
  10 + :loading="loading"
  11 + :absolute="absolute"
  12 + :theme="theme"
  13 + :background="background"
  14 + :tip="tip"
  15 + />
10 16
11 <a-alert message="函数方式" /> 17 <a-alert message="函数方式" />
12 18
@@ -37,6 +43,8 @@ @@ -37,6 +43,8 @@
37 const compState = reactive({ 43 const compState = reactive({
38 absolute: false, 44 absolute: false,
39 loading: false, 45 loading: false,
  46 + theme: 'dark',
  47 + background: 'rgba(111,111,111,.7)',
40 tip: '加载中...', 48 tip: '加载中...',
41 }); 49 });
42 const [openFullLoading, closeFullLoading] = useLoading({ 50 const [openFullLoading, closeFullLoading] = useLoading({