feat: button增加loading (#405)

src/packages/button/demo.vue

@@ -29,7 +29,11 @@
     </div>
     <h2>加载状态</h2>
     <div class="demo-button-row2">
-      <nut-button loading></nut-button>
+      <nut-button loading type="info"></nut-button>
+      <nut-button loading type="warning">加载中...</nut-button>
+      <nut-button :loading="isLoading" type="success" @click="changeLoading"
+        >Click me!</nut-button
+      >
     </div>
     <h2>图标按钮</h2>
     <div class="demo-button-row2">
@@ -66,10 +70,25 @@
 </template>
 
 <script lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('button');
 export default createDemo({
-  props: {}
+  props: {},
+  setup(props) {
+    let isLoading = ref(false);
+    const changeLoading = () => {
+      isLoading.value = true;
+      setTimeout(() => {
+        isLoading.value = false;
+      }, 3000);
+    };
+
+    return {
+      isLoading,
+      changeLoading
+    };
+  }
 });
 </script>
 

src/packages/button/index.scss

@@ -138,6 +138,7 @@
 
   &--loading {
     cursor: default;
+    opacity: 0.9;
   }
 
   &--round {

src/packages/button/index.vue

@@ -86,7 +86,8 @@ export default create({
         [`${prefixCls}--${shape.value}`]: shape.value,
         [`${prefixCls}--plain`]: plain.value,
         [`${prefixCls}--block`]: block.value,
-        [`${prefixCls}--disabled`]: disabled.value
+        [`${prefixCls}--disabled`]: disabled.value,
+        [`${prefixCls}--loading`]: loading.value
       };
     });
 

src/packages/icon/index.scss

@@ -10,4 +10,23 @@
     height: $icon-height;
     object-fit: contain;
   }
+  &-loading {
+    display: inline-block;
+    -webkit-animation: loadingCircle 1s infinite linear;
+    animation: loadingCircle 1s infinite linear;
+  }
+}
+
+@-webkit-keyframes loadingCircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loadingCircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }