fix(button): small 状态的 loading 大小

src/components/button/index.js

@@ -48,9 +48,10 @@ export default class AtButton extends Taro.Component {
     rootClassName.push(`at-button--${sizeClass}`, typeClass, circleClass, disabledClass)
     rootClassName = rootClassName.filter(str => str !== '')
     const loadingColor = type === 'primary' ? '#fff' : '#6190E8'
+    const loadingSize = size === 'small' ? '16' : '18'
     let component
     if (loading) {
-      component = <View className='at-button__icon'><AtLoading color={loadingColor} /></View>
+      component = <View className='at-button__icon'><AtLoading color={loadingColor} size={loadingSize} /></View>
       rootClassName.push('at-button--icon')
     }
 

src/components/loading/index.js

@@ -1,23 +1,42 @@
 import Taro from '@tarojs/taro'
+import PropTypes from 'prop-types'
 import { View } from '@tarojs/components'
 import './index.scss'
 
 class AtLoading extends Taro.Component {
   render () {
-    const style = {
-      'border': `1px solid ${this.props.color}`,
-      'border-color': `${this.props.color} transparent transparent transparent`
+    const { color, size } = this.props
+    const sizeStyle = {
+      width: `${size}px`,
+      height: `${size}px`
     }
+    const colorStyle = {
+      'border': `1px solid ${color}`,
+      'border-color': `${color} transparent transparent transparent`
+    }
+    const ringStyle = Object.assign({}, colorStyle, sizeStyle)
     return (
-      <View className='at-loading'>
-        <View className='at-loading__ring' style={style}></View>
-        <View className='at-loading__ring' style={style}></View>
-        <View className='at-loading__ring' style={style}></View>
+      <View className='at-loading' style={sizeStyle}>
+        <View className='at-loading__ring' style={ringStyle}></View>
+        <View className='at-loading__ring' style={ringStyle}></View>
+        <View className='at-loading__ring' style={ringStyle}></View>
       </View>
     )
   }
 }
+
 AtLoading.defaultProps = {
+  size: '18',
   color: '#fff'
 }
+AtLoading.propTypes = {
+  size: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  color: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ])
+}
 export default AtLoading

src/components/loading/index.scss

@@ -1,3 +1,13 @@
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .at-loading {
   display: inline-block;
   position: relative;
@@ -29,13 +39,3 @@
     }
   }
 }
-
-@keyframes loading {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}