Merge pull request #1477 from P4X666/next

feat: 使ImagePicker支持自定义上传按钮
jd-opensource · Nov 14, 2023 · dfe4e62 · dfe4e62
2 parents 4fd5363 + 7e0fd67
commit dfe4e62
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/packages/taro-ui-docs/markdown/image-picker.md b/packages/taro-ui-docs/markdown/image-picker.md
@@ -110,6 +110,21 @@ export default class Index extends Taro.Component {
 
 :::
 
+## 自定义上传按钮
+
+:::demo
+
+```jsx
+<AtImagePicker
+  files={this.state.files}
+  onChange={this.onChange.bind(this)}
+>
+  <AtButton type="primary">自定义上传按钮</AtButton>
+</AtImagePicker>
+```
+
+:::
+
 ## 多种图片预览模式
 
 :::demo

diff --git a/packages/taro-ui/src/components/image-picker/index.tsx b/packages/taro-ui/src/components/image-picker/index.tsx
@@ -139,14 +139,15 @@ export default class AtImagePicker extends React.Component<AtImagePickerProps> {
                   key={`empty_${i * length}${j}`}
                 >
                   {item.type === 'btn' && (
-                    <View
-                      className='at-image-picker__item at-image-picker__choose-btn'
-                      onClick={this.chooseFile}
-                    >
-                      <View className='add-bar'></View>
-                      <View className='add-bar'></View>
-                    </View>
-                  )}
+                    <View onClick={this.chooseFile}>
+                      {
+                        this.props.children
+                        || <View className='at-image-picker__item at-image-picker__choose-btn'>
+                          <View className='add-bar'></View>
+                          <View className='add-bar'></View>
+                        </View>
+                      }
+                    </View>)}
                 </View>
               )
             )}