增加Button Loading动画类型选择，默认与原生组件保持一致

NervJS · Dec 31, 2019 · 4f848b2 · 4f848b2
1 parent 7c042fa
commit 4f848b2
Showing 1 changed file with 47 additions and 17 deletions.
diff --git a/packages/taro-components-qa/src/components/taro-button/index.ux b/packages/taro-components-qa/src/components/taro-button/index.ux
@@ -4,10 +4,14 @@
     disabled="{{disabled}}"
     style="{{customstyle}}"
   >
-    <image class="{{imageClass}}" if="{{loading}}" src="{{loadingImg}}" ></image>
+    <div if="{{!spinType}}">
+      <progress if="{{loading}}" class="{{circularClass}}" type="circular"></progress>
+    </div>
+    <div else>
+      <image if="{{loading}}" class="{{imageClass}}" src="{{loadingImg}}" ></image>
+    </div>
     <slot></slot>
   </div>
-
 </template>
 
 <script>
@@ -50,6 +54,11 @@ export default {
       required: false,
       default: false
     },
+    spin: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     loading: {
       type: Boolean,
       required: false,
@@ -65,13 +74,16 @@ export default {
   data: () => ({
     btnStyle: {},
     btnClass: '',
+    spinType: false,
     loading: false,
     loadingImg: LOADING_IMG
   }),
 
   onInit() {
     this.btnClass = `taro-button taro-button-${this.type} taro-button-${this.size} ${this.plain ? `taro-button-plain` : `taro-button-noplain`} ${this.disabled ? `taro-button-disabled` : `taro-button-nodisabled`} ${this.circle ? `taro-button-circle` : `taro-button-nocircle`} ${this.className}`;
-    this.imageClass = `taro-image taro-image-${this.size} `;
+    this.imageClass = `taro-spin taro-spin-${this.size}`;
+    this.spinType = this.spin;
+    this.circularClass = `taro-circular taro-circular-${this.type} taro-circular-${this.size}`;
   },
 
   onclick() {}
@@ -95,17 +107,6 @@ export default {
     border: 1px solid #AFAFAF;   
     background-color: #F7F7F7;
   }
-  .taro-image {
-    margin-right: 10px;
-    margin-top: 10px;
-    height: 60px;
-  }
-  .taro-image-small {
-    margin-left: 5px;
-    margin-top: 8px;
-    margin-bottom: 5px;
-    height: 40px;
-  }
   .taro-button:active {
     border-width: 1px;
     border-color: lightslategray;  
@@ -146,17 +147,46 @@ export default {
   .taro-button-danger {
     background-color: #EF4F4F;
     border-color: #EF4F4F;  
-    color: white;
+    color: #FFF;
   }
   .taro-button-danger:active {
     background-color: #ab2048;
     border-color: #ab2048; 
-    color: white;
+    color: #FFF;
   }
   .taro-button-plain {
     opacity: 0.6;
   }
   .taro-button-disabled {
     opacity: 0.3;
   }
-</style>
+  .taro-spin {
+    margin-right: 10px;
+    margin-top: 10px;
+    height: 60px;
+  }
+  .taro-spin-small {
+    margin-left: 5px;
+    margin-top: 8px;
+    margin-bottom: 5px;
+    height: 40px;
+  }
+  .taro-circular {
+    margin-right: 10px;
+    margin-left: 60px;
+    margin-top: 15px;
+    flex-direction: column;
+    align-items: center;
+    height: 50px;
+    color: #09ba07
+  }
+  .taro-circular-primary {
+    color: #FFF;
+  }
+  .taro-circular-small {
+    margin-left: 3px;
+    margin-top: 12px;
+    margin-bottom: 5px;
+    height: 32px;
+  }
+</style>