feat(switch): add loading attribute (#402)

* chore: compiled failed(#230)

* feat(switch): add loading attribute

* style: delete useless comment

packages/switch/src/index.vue

@@ -27,6 +27,9 @@
       <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
     </span>
     <span ref="core" class="el-switch__core" :style="{ 'width': coreWidth + 'px' }">
+      <div class="el-switch__action">
+        <i v-if="loading" class="el-icon-loading"></i>
+      </div>
     </span>
     <span
       v-if="activeIconClass || activeText"
@@ -62,6 +65,7 @@ interface ISwitchProps {
   name: string
   validateEvent: boolean
   id: string
+  loading:boolean
 }
 
 export default defineComponent({
@@ -127,6 +131,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    loading:{
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'change', 'input'],
   setup(props: ISwitchProps, ctx) {
@@ -173,7 +181,7 @@ export default defineComponent({
     })
 
     const switchDisabled = computed((): boolean => {
-      return props.disabled || (elForm || {}).disabled
+      return props.disabled || props.loading ||(elForm || {}).disabled
     })
 
     const handleChange = (): void => {
@@ -195,6 +203,7 @@ export default defineComponent({
       const coreEl = core.value
       coreEl.style.borderColor = newColor
       coreEl.style.backgroundColor = newColor
+      coreEl.children[0].style.color = newColor
     }
 
     onMounted(() => {

packages/theme-chalk/src/switch.scss

@@ -66,8 +66,7 @@
     transition: border-color .3s, background-color .3s;
     vertical-align: middle;
 
-    &:after {
-      content: "";
+    .el-switch__action{
       position: absolute;
       top: 1px;
       left: 1px;
@@ -76,6 +75,10 @@
       width: $--switch-button-size;
       height: $--switch-button-size;
       background-color: $--color-white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: $--switch-off-color;
     }
   }
 
@@ -83,9 +86,10 @@
     .el-switch__core {
       border-color: $--switch-on-color;
       background-color: $--switch-on-color;
-      &::after {
+      .el-switch__action{
         left: 100%;
         margin-left: -$--switch-button-size - 1px;
+        color:$--switch-on-color ;
       }
     }
   }

website/docs/zh-CN/switch.md

@@ -112,6 +112,32 @@
 ```
 :::
 
+### 加载中
+
+:::demo 设置`loading`属性，接受一个`Boolean`，设置`true`即加载中状态。
+
+
+```html
+<el-switch
+  v-model="value1"
+  loading>
+</el-switch>
+<el-switch
+  v-model="value2"
+  loading>
+</el-switch>
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: false
+      }
+    }
+  };
+</script>
+```
+:::
 
 ### Attributes
 
@@ -119,6 +145,7 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | value / v-model | 绑定值 | boolean / string / number | — | — |
 | disabled  | 是否禁用    | boolean   | — | false   |
+| loading  | 是否显示加载中    | boolean   | — | false   |
 | width  | switch 的宽度（像素）    | number   | — | 40 |
 | active-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `active-text`    | string   | — | — |
 | inactive-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`    | string   | — | — |
@@ -139,4 +166,4 @@
 ### Methods
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
-| focus | 使 Switch 获取焦点 | - |
+| focus | 使 Switch 获取焦点 | - |