fix: 修复 h5 细节

jd-opensource · Aug 17, 2018 · 471e0ad · 471e0ad
1 parent 1858b7a
commit 471e0ad
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/src/components/badge/index.scss b/src/components/badge/index.scss
@@ -29,7 +29,7 @@ $badge-dot-size: 20px;
     height: $badge-height;
     line-height: $badge-height;
     position: absolute;
-    right: 0;
+    right: -6PX;
     top: -$badge-border-radius;
     transform: translate(50%, 0);
     padding: 0 $spacing-h-sm;

diff --git a/src/components/input-number/index.js b/src/components/input-number/index.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import AtIcon from '../../components/icon/index'
 import './index.scss'
 
+Taro.initNativeApi(Taro)
 /**
  * @author:chenzeji
  * @description 数字输入框
@@ -15,6 +16,7 @@ import './index.scss'
  * @prop onChange {Function} 监听事件改变函数
  */
 class AtInputNumber extends Taro.Component {
+  // 实现两数相加并保留小数点后最短尾数
   static addNum (num1, num2) {
     let sq1, sq2
     try {
@@ -30,27 +32,35 @@ class AtInputNumber extends Taro.Component {
     const m = Math.pow(10, Math.max(sq1, sq2))
     return (Math.round(num1 * m) + Math.round(num2 * m)) / m
   }
+  // 格式化数字，处理01变成1,并且不处理1. 这种情况
+  static parseValue (num) {
+    const numStr = num.toString()
+    if (numStr.indexOf('0') === 0 && numStr.indexOf('.') === -1) {
+      return parseFloat(num)
+    }
+    return num
+  }
   handleMinus () {
     const { disabled, value, min, step } = this.props
     if (disabled) return
     let nextValue = AtInputNumber.addNum(value, -step)
     nextValue = nextValue > min ? nextValue : min
-    this.props.onChange(nextValue)
+    this.props.onChange(AtInputNumber.parseValue(nextValue))
   }
   handlePlus () {
     const { disabled, value, max, step } = this.props
     if (disabled) return
     let nextValue = AtInputNumber.addNum(value, step)
     nextValue = nextValue < max ? nextValue : max
-    this.props.onChange(nextValue)
+    this.props.onChange(AtInputNumber.parseValue(nextValue))
   }
   handleInput (e) {
     const { value } = e.target
     const { disabled, min, max } = this.props
     if (disabled) return
     let nextValue = value < max ? value : max
     nextValue = nextValue > min ? nextValue : min
-    this.props.onChange(nextValue)
+    this.props.onChange(AtInputNumber.parseValue(nextValue))
   }
   render () {
     const { width, disabled, value, min, max, size } = this.props
@@ -65,7 +75,7 @@ class AtInputNumber extends Taro.Component {
       </View>
       <Input className='at-input-number__input'
         style={inputStyle}
-        type='number'
+        type='digit'
         value={value}
         disabled={disabled}
         onInput={this.handleInput.bind(this)}

diff --git a/src/components/nav-bar/index.scss b/src/components/nav-bar/index.scss
@@ -35,6 +35,7 @@ $spacing-h: 5PX;
   &__right_view {
     flex: 2;
     overflow: hidden;
+    height: 100%;
     text-align: right;
   }
 
@@ -59,6 +60,7 @@ $spacing-h: 5PX;
 
   &__container {
     width: 50%;
+    height: 100%;
     display: inline-block;
     text-align: center;
     box-sizing: border-box;

diff --git a/src/components/tab-bar/index.js b/src/components/tab-bar/index.js
@@ -49,20 +49,28 @@ class AtTabBar extends Taro.Component {
             key={item.title}
             onClick={this.handleClick.bind(this, i)}
           >
-            <AtBadge dot={item.dot} value={item.text} max={item.max}>
-              {
-                item.iconType
-                  ? <View className='at-tab-bar__icon'>
+            {
+              item.iconType
+                ? <AtBadge dot={item.dot} value={item.text} max={item.max}>
+                  <View className='at-tab-bar__icon'>
                     <AtIcon
                       value={current === i && item.selectedIconType ? item.selectedIconType : item.iconType}
                       size={iconSize}
                       color={current === i ? selectedColor : color}
                     />
                   </View>
-                  : null
-              }
-              <View className='at-tab-bar__title' style={titleStyle}>{item.title}</View>
-            </AtBadge>
+                </AtBadge>
+                : null
+            }
+            <View>
+              <AtBadge
+                dot={item.iconType ? '' : item.dot}
+                value={item.iconType ? '' : item.text}
+                max={item.iconType ? '' : item.max}
+              >
+                <View className='at-tab-bar__title' style={titleStyle}>{item.title}</View>
+              </AtBadge>
+            </View>
           </View>
         })
       }