Merge pull request #422 from zhoufanglu/master

feat: switch 增加 loading状态
FightingDesign · Aug 4, 2023 · 1905113 · 1905113
2 parents e49d5b3 + 7de60bf
commit 1905113
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/docs/components/switch.md b/docs/components/switch.md
@@ -90,6 +90,34 @@
 
 :::
 
+
+## 加载状态
+
+`loading` 属性可以加载 `switch`
+
+::: demo
+
+<template #source>
+<f-switch v-model="value4" loading />
+<f-switch v-model="value5" loading />
+</template>
+
+```html
+<template>
+  <f-switch v-model="value4" loading />
+  <f-switch v-model="value5" loading />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const value4 = ref(true)
+  const value5 = ref(false)
+</script>
+```
+
+:::
+
 ## 方形的
 
 `square` 属性可以将 `switch` 设置为方形样式

diff --git a/packages/fighting-design/switch/src/props.ts b/packages/fighting-design/switch/src/props.ts
@@ -25,6 +25,8 @@ export const Props = {
   }),
   /** 是否禁用 */
   disabled: setBooleanProp(),
+  /** 是否loading */
+  loading: setBooleanProp(),
   /** 自定义 icon */
   icon: setObjectProp<FightingIcon>(),
   /** 关闭时的颜色 */

diff --git a/packages/fighting-design/switch/src/switch.vue b/packages/fighting-design/switch/src/switch.vue
@@ -2,6 +2,7 @@
   import { Props } from './props'
   import { FSvgIcon } from '../../svg-icon'
   import { useList, useRun, useGlobal } from '../../_hooks'
+  import { FIconLoadingA } from '../../_svg'
 
   defineOptions({ name: 'FSwitch' })
 
@@ -18,7 +19,7 @@
 
   /** 点击切换 */
   const handleClick = (): void => {
-    if (prop.disabled) return
+    if (prop.disabled || prop.loading) return
     modelValue.value = !modelValue.value
     run(prop.onChange, !prop.modelValue)
   }
@@ -33,7 +34,7 @@
 <template>
   <div
     role="switch"
-    :class="['f-switch', { 'f-switch__disabled': disabled }]"
+    :class="['f-switch', { 'f-switch__disabled': disabled | loading }]"
     :style="styleList"
   >
     <!-- 左侧文字描述 -->
@@ -47,7 +48,13 @@
     <!-- 主要内容 -->
     <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" :icon="icon" :size="iconSize" />
+        <f-svg-icon v-if="icon && !loading" :icon="icon" :size="iconSize" />
+        <f-svg-icon
+          v-if="loading"
+          class="f-button__loading-animation"
+          :icon="FIconLoadingA"
+          :size="iconSize"
+        />
       </span>
     </div>