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