fix: 修复细节问题

docs/markdown/input-number.md

@@ -54,6 +54,7 @@ import AtInputNumber from 'taro-ui'
 | 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   |
 | ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |
 | value | 输入框值 | Number  | - | 1 |
+| width       | input宽度,不包括两侧按钮，单位根据环境转为rpx或rem  | Number  | - | 120 |
 | min       | 最小值  | Number  | - | 0 |
 | max     | 最大值  | Number | - | 100 |
 | step   | 每次点击改变的间隔大小 | Number  | -  | 1 |

docs/markdown/textarea.md

@@ -63,6 +63,7 @@ import AtTextarea from 'taro-ui'
 | fixed| 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true  | Boolean | - | false|
 | textOverflowForbidden | 文字超出最大长度时是否禁止输入，若否，则还可以在maxlength的基础上输入500字符，并右下角红字提示  | Boolean | - | true |
 | height | 输入框高度  | Number | - | 100  |
+| cursorSpacing | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离，只在小程序端有效，目前安卓端微信官方有bug，该特性失效  | Number | - | 100  |
 
 ## 事件
 

src/components/input-number/index.js

@@ -32,40 +32,35 @@ class AtInputNumber extends Taro.Component {
   }
   handleMinus () {
     const { disabled, value, min, step } = this.props
-    if (disabled) {
-      return
-    }
+    if (disabled) return
     let nextValue = AtInputNumber.addNum(value, -step)
     nextValue = nextValue > min ? nextValue : min
     this.props.onChange(nextValue)
   }
   handlePlus () {
     const { disabled, value, max, step } = this.props
-    if (disabled) {
-      return
-    }
+    if (disabled) return
     let nextValue = AtInputNumber.addNum(value, step)
     nextValue = nextValue < max ? nextValue : max
     this.props.onChange(nextValue)
   }
   handleInput (e) {
     const { value } = e.target
     const { disabled, min, max } = this.props
-    if (disabled) {
-      return
-    }
+    if (disabled) return
     let nextValue = value < max ? value : max
     nextValue = nextValue > min ? nextValue : min
     this.props.onChange(nextValue)
   }
   render () {
-    const { disabled, value, min, max } = this.props
-
+    const { width, disabled, value, min, max } = this.props
+    const inputStyle = `width: ${Taro.pxTransform(width)}`
     return <View className='at-input-number' >
       <View className='at-input-number__btn' onClick={this.handleMinus.bind(this)}>
         <AtIcon value='subtract' color={value <= min || disabled ? '#ccc' : '#6190e8'} size='20' />
       </View>
       <Input className='at-input-number__input'
+        style={inputStyle}
         type='number'
         value={value}
         disabled={disabled}
@@ -80,6 +75,7 @@ class AtInputNumber extends Taro.Component {
 AtInputNumber.defaultProps = {
   disabled: false,
   value: 1,
+  width: 120,
   min: 0,
   max: 100,
   step: 1,
@@ -88,6 +84,7 @@ AtInputNumber.defaultProps = {
 AtInputNumber.propTypes = {
   disabled: PropTypes.bool,
   value: PropTypes.number,
+  width: PropTypes.number,
   min: PropTypes.number,
   max: PropTypes.number,
   step: PropTypes.number,

src/components/input-number/index.scss

@@ -29,7 +29,7 @@ $input-number-size-min: 120px;
   &__input {
     display: inline-block;
     padding: $spacing-v-sm;
-    min-width: $input-number-size-min;
+    width: $input-number-size-min;
     height: auto;
     font-size: $font-size-xl;
     text-align: center;

src/components/nav-bar/index.js

@@ -56,7 +56,7 @@ const defaultFunc = () => {}
 AtNavBar.defaultProps = {
   fixed: false,
   color: '#6190E8',
-  leftIconType: 'chevron-left',
+  leftIconType: '',
   leftText: '',
   title: '',
   rightFirstIconType: '',

src/components/nav-bar/index.scss

@@ -48,6 +48,7 @@
   &__text {
     display: inline-block;
     font-size: $font-size-lg;
+    padding-left: $spacing-h-sm;
   }
 
   &__container {

src/components/radio/index.scss

@@ -29,6 +29,7 @@
 
   &__desc {
     display: block;
+    width: 86%;
     text-align: left;
     font-size: $font-size-sm;
     color: $color-grey-2;

src/components/rate/index.scss

@@ -1,4 +1,6 @@
 .at-rate,
 .at-rate__icon {
+  line-height: 0;
+  font-size: 0;
   display: inline-block;
 }

src/components/textarea/index.js

@@ -7,6 +7,7 @@ import './index.scss'
  * @author: chenzeji
  * @description 多行文本输入框组件
  * @prop value {String} 输入框当前值
+ * @prop cursorSpacing {Number} 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离  default:100
  * @prop maxlength {Number|String}  最大长度 default:200
  * @prop placeholder {String} 提示
  * @prop disabled {Boolean} 是否禁用 default:false
@@ -33,7 +34,7 @@ class AtTextarea extends Taro.Component {
     this.props.onConfirm(e, ...arguments)
   }
   render () {
-    const { value, maxlength, placeholder, count, disabled, autoFocus, fixed, textOverflowForbidden, height } = this.props
+    const { value, cursorSpacing, maxlength, placeholder, count, disabled, autoFocus, fixed, textOverflowForbidden, height } = this.props
     let actualMaxLength = maxlength
     if (!textOverflowForbidden) {
       actualMaxLength += 500
@@ -44,7 +45,7 @@ class AtTextarea extends Taro.Component {
       <Textarea
         style={textareaStyle}
         placeholderClass='placeholder'
-        cursorSpacing='50'
+        cursorSpacing={cursorSpacing}
         className='at-textarea__textarea'
         value={value}
         showConfirmBar={false}
@@ -70,6 +71,7 @@ class AtTextarea extends Taro.Component {
 const defaultFunc = () => {}
 AtTextarea.defaultProps = {
   value: '',
+  cursorSpacing: 100,
   maxlength: 200,
   placeholder: '',
   disabled: false,
@@ -85,6 +87,7 @@ AtTextarea.defaultProps = {
 }
 AtTextarea.propTypes = {
   value: PropTypes.string,
+  cursorSpacing: PropTypes.number,
   maxlength: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number

src/pages/form/input-number/index.js

@@ -13,7 +13,8 @@ export default class Index extends Taro.Component {
     this.state = {
       number1: 1,
       number2: 1,
-      number3: 1
+      number3: 1,
+      number4: 1,
     }
   }
   handleNumberChange (stateName, value) {
@@ -61,6 +62,16 @@ export default class Index extends Taro.Component {
               </View>
             </View>
           </View>
+
+          {/* 自定义宽度 */}
+          <View className='panel'>
+            <View className='panel__title'>自定义宽度</View>
+            <View className='panel__content'>
+              <View className='example-item'>
+                <AtInputNumber width={200} min={0} max={10} step={1} value={this.state.number4} onChange={this.handleNumberChange.bind(this, 'number4')} />
+              </View>
+            </View>
+          </View>
         </View>
         {/* E Body */}
       </View>

src/pages/form/rate/index.js

@@ -1,5 +1,5 @@
 import Taro from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import AtRate from '../../../components/rate/index'
 import DocsHeader from '../../components/doc-header'
 import './index.scss'
@@ -69,7 +69,10 @@ export default class Index extends Taro.Component {
             <View className='panel__title'>只读</View>
             <View className='panel__content'>
               <View className='example-item'>
-                <View><AtRate value={3.5} /><Text className='rate'>评分: 3.5</Text></View>
+                <View>评分: 3.5</View>
+                <View>
+                  <AtRate value={3.5} />
+                </View>
               </View>
             </View>
           </View>

src/pages/form/rate/index.scss

@@ -1,8 +1,4 @@
 .example-item {
   color: #333;
   font-size: 28px;
-
-  .rate {
-    margin-left: 24px;
-  }
 }