From 97446b1fb00d018cf71c5d3d259ff1df637692d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 7 Aug 2022 03:01:12 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(switch):=20=E6=96=B0=E5=A2=9E=20loadi?=
 =?UTF-8?q?ng=20=E4=B8=8E=20loading-icon=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/switch/index.vue  | 12 +++++--
 .../src/document/zh-CN/components/switch.md   | 35 +++++++++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/package/component/src/component/switch/index.vue b/package/component/src/component/switch/index.vue
index 6b970891..0070d5a7 100644
--- a/package/component/src/component/switch/index.vue
+++ b/package/component/src/component/switch/index.vue
@@ -19,12 +19,15 @@ export interface LaySwitchProps {
   onswitchValue?: string | number | boolean;
   unswitchValue?: string | number | boolean;
   size?: "lg" | "md" | "sm" | "xs";
+  loadingIcon?: string;
+  loading?: boolean;
 }
 
 const props = withDefaults(defineProps<LaySwitchProps>(), {
   disabled: false,
   onswitchValue: true,
   unswitchValue: false,
+  loadingIcon: "layui-icon-loading-one",
   size: "md",
 });
 
@@ -75,8 +78,13 @@ const styles = computed(() => {
       <em>{{ isActive == true ? onswitchText : unswitchText }}</em>
       <span>
         <div>
-          <slot v-if="isActive" name="onswitch-icon"></slot>
-          <slot v-else name="unswitch-icon"></slot>
+          <template v-if="loading">
+            <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" :class="loadingIcon"></i>
+          </template>
+          <template v-else>
+              <slot v-if="isActive" name="onswitch-icon"></slot>
+              <slot v-else name="unswitch-icon"></slot>
+          </template>
         </div>
       </span>
     </div>
diff --git a/package/document-component/src/document/zh-CN/components/switch.md b/package/document-component/src/document/zh-CN/components/switch.md
index 71b820bf..fc9eb088 100644
--- a/package/document-component/src/document/zh-CN/components/switch.md
+++ b/package/document-component/src/document/zh-CN/components/switch.md
@@ -149,10 +149,10 @@ export default {
 ::: title 自定义值
 :::
 
-::: demo
+::: demo 通过 onswitch-value 与 unswitch-value 属性, 设置不同状态的值。
 
 <template>
-  <lay-switch v-model="active6" onswitch-value="dark"  unswitch-value="light"></lay-switch>
+  <lay-switch v-model="active6" onswitch-value="dark" unswitch-value="light"></lay-switch>
 </template>
 
 <script>
@@ -203,6 +203,35 @@ export default {
 
 :::
 
+::: title 加载状态
+:::
+
+::: demo 通过 `loading` 与 `loading-icon` 属性, 开启加载状态与自定义加载图标。 
+
+<template>
+  <lay-switch v-model="active8" :loading="loading8"  :disabled="true"></lay-switch>
+  <lay-switch v-model="loading8" style='margin-left:10px'></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active8 = ref(true)
+    const loading8 = ref(true)
+
+    return {
+        active8,
+        loading8
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Switch 属性
 :::
 
@@ -218,6 +247,8 @@ export default {
 | onswitch-value | 启用值       | `true`        |
 | unswitch-value | 禁用值       | `false`         |
 | size | 尺寸       | `lg` `md` `sm` `xs`         |
+| loading | 加载状态       | `true` `false`         |
+| loading-icon | 加载图标       | --         |
 
 :::