fix(image-picker): 修复 image-picker 细节问题

jd-opensource · Nov 22, 2018 · a7167c0 · a7167c0
1 parent e5b6ea3
commit a7167c0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 25 deletions.
diff --git a/docs/markdown/image-picker.md b/docs/markdown/image-picker.md
@@ -122,7 +122,7 @@ export default class Index extends Taro.Component {
 | 参数       | 说明       | 类型    | 可选值    | 默认值   |
 | ---------- | -------- | ------- | -------- | -------- |
 | files | 图片文件数组, 元素为对象, 包含属性 url（必选) | Array  | - | [] |
-| mode | 图片预览模式，详见(微信开发者文档)[https://developers.weixin.qq.com/miniprogram/dev/component/image.html] | String  | ```'scaleToFill'|'aspectFit'|'aspectFill'|'widthFix'|'top'|'bottom'|'center'|'left'|'right'|'top left'|'top right'|'bottom left'|'bottom right'``` | scaleToFill |
+| mode | 图片预览模式，详见(微信开发者文档)[https://developers.weixin.qq.com/miniprogram/dev/component/image.html] | String  | ```'scaleToFill'|'aspectFit'|'aspectFill'|'widthFix'|'top'|'bottom'|'center'|'left'|'right'|'top left'|'top right'|'bottom left'|'bottom right'``` | aspectFill |
 | showAddBtn | 是否显示添加图片按钮 | Boolean  | - | true |
 | multiple | 是否支持多选 | Boolean  | - | false |
 | length | 单行的图片数量 | Number  | - | 4 |

diff --git a/src/components/image-picker/index.js b/src/components/image-picker/index.js
@@ -41,7 +41,7 @@ export default class AtImagePicker extends AtComponent {
     className: '',
     customStyle: '',
     files: [],
-    mode: 'scaleToFill',
+    mode: 'aspectFill',
     showAddBtn: true,
     multiple: false,
     length: 4,
@@ -184,7 +184,7 @@ export default class AtImagePicker extends AtComponent {
                           className='at-image-picker__remove-btn'
                           onClick={this.handleRemoveImg.bind(this, (i * length) + j)}
                         >
-                          <AtIcon value='close' size='14' color='#fff' />
+                          <AtIcon value='close' size='10' color='#fff' />
                         </View>
                         <Image
                           mode={mode}

diff --git a/src/components/image-picker/index.scss b/src/components/image-picker/index.scss
@@ -34,13 +34,14 @@
     transform: translateY(-50%);
     width: 100%;
     height: 100%;
+    border-radius: $border-radius-md;
+    overflow: hidden;
   }
 
   &__choose-btn {
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 5PX;
     color: $color-grey-2;
     font-size: 0;
     box-sizing: border-box;

diff --git a/src/pages/form/image-picker/index.js b/src/pages/form/image-picker/index.js
@@ -12,20 +12,56 @@ export default class Index extends Taro.Component {
   constructor () {
     super(...arguments)
     this.state = {
-      files: [{
-        url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
-      },
-      {
-        url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
-      },
-      {
-        url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
-      }]
+      files1: [
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
+        },
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
+        },
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
+        }
+      ],
+      files2: [
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
+        },
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
+        },
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
+        }
+      ],
+      files3: [
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
+        },
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
+        },
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
+        }
+      ],
+      files4: [
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
+        },
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
+        },
+        {
+          url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
+        }
+      ]
     }
   }
-  onChange (files) {
+
+  onChange (stateName, files) {
     this.setState({
-      files
+      [stateName]: files
     })
   }
 
@@ -52,8 +88,8 @@ export default class Index extends Taro.Component {
             <View className='panel__content no-padding'>
               <View className='example-item'>
                 <AtImagePicker
-                  files={this.state.files}
-                  onChange={this.onChange.bind(this)}
+                  files={this.state.files1}
+                  onChange={this.onChange.bind(this, 'files1')}
                 />
               </View>
             </View>
@@ -66,25 +102,25 @@ export default class Index extends Taro.Component {
               <View className='example-item'>
                 <AtImagePicker
                   multiple
-                  files={this.state.files}
-                  onChange={this.onChange.bind(this)}
+                  files={this.state.files2}
+                  onChange={this.onChange.bind(this, 'files2')}
                   onFail={this.onFail.bind(this)}
                   onImageClick={this.onImageClick.bind(this)}
                 />
               </View>
             </View>
           </View>
 
-          {/* 自定义数量 */}
+          {/* 自定义每行数量 */}
           <View className='panel'>
-            <View className='panel__title'>自定义数量</View>
+            <View className='panel__title'>自定义每行数量</View>
             <View className='panel__content no-padding'>
               <View className='example-item'>
                 <AtImagePicker
                   multiple
                   length={3}
-                  files={this.state.files}
-                  onChange={this.onChange.bind(this)}
+                  files={this.state.files3}
+                  onChange={this.onChange.bind(this, 'files3')}
                 />
               </View>
             </View>
@@ -98,8 +134,8 @@ export default class Index extends Taro.Component {
                 <AtImagePicker
                   mode='aspectFill'
                   multiple
-                  files={this.state.files}
-                  onChange={this.onChange.bind(this)}
+                  files={this.state.files4}
+                  onChange={this.onChange.bind(this, 'files4')}
                 />
               </View>
             </View>