✨ feat: 修复按钮 loading 无法完全遮盖问题

ivy-design · Nov 3, 2023 · 5fc06ba · 5fc06ba
1 parent d87639a
commit 5fc06ba
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 42 deletions.
diff --git a/packages/docs/src/components/button.md b/packages/docs/src/components/button.md
@@ -83,32 +83,43 @@
 ## 支持的 Css 变量
 
 :::details 点击打开
+
 ```css
-:host{
-    --ivy-button-border-color: var(--ivy-border-color, #dcdfe6);
-    --ivy-button-text-color: var(--ivy-text-color, #303133);
-    --ivy-button-background-color: var(--ivy-color-white, #fff);
-
-    --ivy-button-hover-text-color: var(--el-color-white, #fff);
-    --ivy-button-hover-background-color: var(--ivy-color-primary-light-3, #79bbff);
-    --ivy-button-hover-border-color: var(--ivy-color-primary-light-3, #79bbff);
-
-    --ivy-button-active-background-color: var(--ivy-color-primary-dark-2, #337ecc);
-    --ivy-button-active-border-color: var(--ivy-color-primary-dark-2, #337ecc);
-
-    --ivy-button-disabled-text-color: var(--ivy-color-white, #fff);
-    --ivy-button-disabled-background-color: var(--ivy-color-primary-light-5, #a0cfff);
-    --ivy-button-disabled-border-color: var(--ivy-color-primary-light-5, #a0cfff);
-
-    --ivy-button-height: var(--ivy-size-medium, 32px);
+:host {
+  --ivy-button-border-color: var(--ivy-border-color, #dcdfe6);
+  --ivy-button-text-color: var(--ivy-text-color, #303133);
+  --ivy-button-background-color: var(--ivy-color-white, #fff);
+
+  --ivy-button-hover-text-color: var(--el-color-white, #fff);
+  --ivy-button-hover-background-color: var(
+    --ivy-color-primary-light-3,
+    #79bbff
+  );
+  --ivy-button-hover-border-color: var(--ivy-color-primary-light-3, #79bbff);
+
+  --ivy-button-active-background-color: var(
+    --ivy-color-primary-dark-2,
+    #337ecc
+  );
+  --ivy-button-active-border-color: var(--ivy-color-primary-dark-2, #337ecc);
+
+  --ivy-button-disabled-text-color: var(--ivy-color-white, #fff);
+  --ivy-button-disabled-background-color: var(
+    --ivy-color-primary-light-5,
+    #a0cfff
+  );
+  --ivy-button-disabled-border-color: var(--ivy-color-primary-light-5, #a0cfff);
+
+  --ivy-button-height: var(--ivy-size-medium, 32px);
 }
 ```
+
 :::
 
 ## Props
 
-| 属性名   | 说明   | 可选值                                         | 默认值       |
-| -------- | ------ |---------------------------------------------|-----------|
+| 属性名   | 说明   | 可选值                                      | 默认值    |
+| -------- | ------ | ------------------------------------------- | --------- |
 | type     | 类型   | default/primary/success/warning/danger/info | `default` |
 | round    | 圆角   | -                                           | -         |
 | disabled | 禁用   | -                                           | -         |

diff --git a/packages/ivy-design-wc/package.json b/packages/ivy-design-wc/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ivy-design/ce",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "private": false,
     "main": "dist/ivy-design.js",
     "module": "dist/ivy-design.mjs",

diff --git a/packages/ivy-design-wc/src/components/button/index.ce.vue b/packages/ivy-design-wc/src/components/button/index.ce.vue
@@ -33,7 +33,6 @@ const props = defineProps({
             'ivy-button',
             `ivy-button--${props.type}`,
             {
-                'is-loading': props.loading,
                 'is-round': props.round,
                 'is-disabled': props.disabled
             }
@@ -42,6 +41,7 @@ const props = defineProps({
         <genLoading v-if="props.loading" class="ivy-loading" />
         <slot></slot>
     </button>
+    <div v-if="props.loading" class="is-loading"></div>
 </template>
 
 <style lang="scss">
@@ -66,12 +66,12 @@ const props = defineProps({
 
     --ivy-button-height: var(--ivy-size-medium, 32px);
     margin-right: 12px;
+    position: relative;
 }
 :host(:last-child) {
     margin-right: 0;
 }
 .ivy-button {
-    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -110,6 +110,7 @@ const props = defineProps({
     }
     & .ivy-loading {
         margin-right: 8px;
+        animation: rotating 2s linear infinite;
     }
 
     &--primary {
@@ -197,26 +198,18 @@ const props = defineProps({
         --ivy-button-disabled-border-color: var(--ivy-color-info-light-5, #c8c9cc);
     }
 }
-.ivy-button.is-loading {
-    position: relative;
-    pointer-events: none;
-    &::before {
-        display: block;
-        box-sizing: border-box;
-        z-index: 1;
-        pointer-events: none;
-        content: ' ';
-        position: absolute;
-        width: calc(100% + 2px);
-        height: calc(100% + 2px);
-        left: -1px;
-        top: -1px;
-        border-radius: inherit;
-        background-color: var(--ivy-mask-color-extra-light, rgba(255, 255, 255, 0.3));
-    }
-    & .ivy-loading {
-        animation: rotating 2s linear infinite;
-    }
+.is-loading {
+    display: block;
+    box-sizing: border-box;
+    z-index: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: var(--ivy-mask-color-extra-light, rgba(255, 255, 255, 0.3));
+
+    border-radius: 4px;
 }
 
 .ivy-button.is-round {