fix: 修复 switch 组件问题

FightingDesign · Aug 4, 2023 · ab7c131 · ab7c131
1 parent 1905113
commit ab7c131
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 27 deletions.
diff --git a/docs/components/switch.md b/docs/components/switch.md
@@ -90,7 +90,6 @@
 
 :::
 
-
 ## 加载状态
 
 `loading` 属性可以加载 `switch`
@@ -222,6 +221,7 @@
 | `modelValue / v-model` | 绑定值                     | string                                                             | ——                              | false  |
 | `size`                 | 组件尺寸                   | <a href="/components/interface.html#fightingsize">FightingSize</a> | `large` `middle` `small` `mini` | middle |
 | `disabled`             | 是否禁用                   | boolean                                                            | ——                              | false  |
+| `loading`              | 是否为加载状态             | boolean                                                            | ——                              | false  |
 | `icon`                 | 自定义 icon                | <a href="/components/interface.html#fightingicon">FightingIcon</a> | ——                              | ——     |
 | `close-color`          | 自定义关闭状态背景色       | string                                                             | ——                              | ——     |
 | `active-color`         | 自定义开启状态背景色       | string                                                             | ——                              | ——     |
@@ -249,6 +249,10 @@ import type { SwitchInstance, SwitchProps } from 'fighting-design'
   <f-avatar round src="https://avatars.githubusercontent.com/u/34115313?v=4" />
 </a>
 
+<a href="https://github.com/zhoufanglu" target="_blank">
+  <f-avatar round src="https://avatars.githubusercontent.com/u/24451091?v=4" />
+</a>
+
 <script setup lang="ts">
   import { ref } from 'vue'
   import { FIconSnowflake } from '@fighting-design/fighting-icon'

diff --git a/packages/fighting-design/switch/src/switch.vue b/packages/fighting-design/switch/src/switch.vue
@@ -34,7 +34,7 @@
 <template>
   <div
     role="switch"
-    :class="['f-switch', { 'f-switch__disabled': disabled | loading }]"
+    :class="['f-switch', { 'f-switch__disabled': disabled || loading }]"
     :style="styleList"
   >
     <!-- 左侧文字描述 -->
@@ -49,9 +49,11 @@
     <div :class="[classList, { 'f-switch__active': modelValue }]" @click="handleClick">
       <span :class="['f-switch__roll', { 'f-switch__roll-active': modelValue }]">
         <f-svg-icon v-if="icon && !loading" :icon="icon" :size="iconSize" />
+
+        <!-- loading icon -->
         <f-svg-icon
           v-if="loading"
-          class="f-button__loading-animation"
+          class="f-switch__loading-animation"
           :icon="FIconLoadingA"
           :size="iconSize"
         />

diff --git a/packages/fighting-theme/src/checkbox-group.scss b/packages/fighting-theme/src/checkbox-group.scss
@@ -35,43 +35,35 @@
     }
 
     // 不同尺寸
-    &.f-checkbox-group__large {
-      .f-checkbox {
-        padding: 4px 30px;
+    &.f-checkbox-group__large .f-checkbox {
+      padding: 4px 30px;
 
-        .f-checkbox__text {
-          font-size: 16px;
-        }
+      .f-checkbox__text {
+        font-size: 16px;
       }
     }
 
-    &.f-checkbox-group__middle {
-      .f-checkbox {
-        padding: 3px 25px;
+    &.f-checkbox-group__middle .f-checkbox {
+      padding: 3px 25px;
 
-        .f-checkbox__text {
-          font-size: 15px;
-        }
+      .f-checkbox__text {
+        font-size: 15px;
       }
     }
 
-    &.f-checkbox-group__small {
-      .f-checkbox {
-        padding: 2px 20px;
+    &.f-checkbox-group__small .f-checkbox {
+      padding: 2px 20px;
 
-        .f-checkbox__text {
-          font-size: 14px;
-        }
+      .f-checkbox__text {
+        font-size: 14px;
       }
     }
 
-    &.f-checkbox-group__mini {
-      .f-checkbox {
-        padding: 2px 15px;
+    &.f-checkbox-group__mini .f-checkbox {
+      padding: 2px 15px;
 
-        .f-checkbox__text {
-          font-size: 12px;
-        }
+      .f-checkbox__text {
+        font-size: 12px;
       }
     }
   }

diff --git a/packages/fighting-theme/src/switch.scss b/packages/fighting-theme/src/switch.scss
@@ -44,6 +44,21 @@
         font-size: var(--switch-font-size);
         color: var(--switch-close-color, #bbbbbb);
       }
+
+      .f-switch__loading-animation {
+        animation: f-switch-loading-animation 1s linear infinite;
+      }
+
+      // loading 动画
+      @keyframes f-switch-loading-animation {
+        from {
+          transform: rotate(0deg);
+        }
+
+        to {
+          transform: rotate(360deg);
+        }
+      }
     }
 
     // 选中状态