<van-uploader 设置上传按钮的尺寸和预览图片的尺寸

1 说明

1.1 代码

 <van-uploader file-list="{{ fileList }}"deletable="{{ true }}"max-count="10"multiple  accept="image"max-size="5242880"preview-image="{{true}}"bind:delete="deleteImg"bind:before-read="beforeRead"bind:after-read="afterRead" /></view>

1.2 效果

　　想要把下图蓝色部分大小调整下

 

2 各种尝试

2.1 使用官方文档提供的属性preview-size

　　发现没有效果

 

2.2 使用样式

　　还是没有效果

<!-- 在 WXML 文件中 -->
<van-uploader class="custom-uploader"file-list="{{ fileList }}"bind:after-read="{{ afterRead }}"max-count="5"
/>

 

/* 在对应页面的 WXSS 文件中 */
.custom-uploader .van-uploader__preview-image {width: 200rpx;height: 150rpx;border-radius: 8rpx;
}/* 或者设置上传区域的尺寸 */
.custom-uploader .van-uploader__upload {width: 200rpx;height: 150rpx;
}

 

2.3 使用样式强制覆盖

　　终于成功了

/* 在对应页面的 WXSS 文件中 */
/* 强制覆盖 Vant 的默认样式 */
.van-uploader__preview-image {width: 180rpx !important;height: 180rpx !important;border-radius: 20rpx;
}/* 如果需要设置上传按钮的尺寸 */
.van-uploader__upload {width: 180rpx !important;height: 180rpx !important;
}