|
@@ -6,12 +6,17 @@
|
|
|
height: width + 'rpx'
|
|
|
}">
|
|
|
<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
|
|
|
- background: delBgColor
|
|
|
+ background: delBgColor,
|
|
|
}">
|
|
|
- <u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon>
|
|
|
+ <u-icon class="u-icon" :name="delIcon" :size="delIconSize" :color="delColor"></u-icon>
|
|
|
</view>
|
|
|
- <u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false" height="16"
|
|
|
- class="u-progress" :percent="item.progress"></u-line-progress>
|
|
|
+ <view v-if="showProgress && item.progress > 0 && !item.error" class="u-check-icon" @tap.stop="deleteItem(index)" :style="{
|
|
|
+ background: checkBgColor,
|
|
|
+ }">
|
|
|
+ <u-icon class="u-icon" :name="checkIcon" :size="checkIconSize" :color="checkColor"></u-icon>
|
|
|
+ </view>
|
|
|
+ <!-- <u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false" height="16"
|
|
|
+ class="u-progress" :percent="item.progress"></u-line-progress> -->
|
|
|
<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
|
|
|
<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage"
|
|
|
:src="item.url || item.path" :mode="imageMode"></image>
|
|
@@ -110,6 +115,11 @@
|
|
|
type: [String, Number],
|
|
|
default: 52,
|
|
|
},
|
|
|
+ // 删除图标大小
|
|
|
+ delIconSize:{
|
|
|
+ type: String,
|
|
|
+ default: '20'
|
|
|
+ },
|
|
|
// 是否显示进度条
|
|
|
showProgress: {
|
|
|
type: Boolean,
|
|
@@ -157,6 +167,26 @@
|
|
|
return ['album', 'camera'];
|
|
|
}
|
|
|
},
|
|
|
+ // 成功背景颜色
|
|
|
+ checkBgColor:{
|
|
|
+ type: String,
|
|
|
+ default: '#22C572'
|
|
|
+ },
|
|
|
+ // 成功icon颜色
|
|
|
+ checkColor:{
|
|
|
+ type: String,
|
|
|
+ default: '#fff'
|
|
|
+ },
|
|
|
+ // 成功icon颜色
|
|
|
+ checkIcon:{
|
|
|
+ type: String,
|
|
|
+ default: 'checkbox-mark'
|
|
|
+ },
|
|
|
+ // 成功icon颜色
|
|
|
+ checkIconSize:{
|
|
|
+ type: String,
|
|
|
+ default: '20'
|
|
|
+ },
|
|
|
// 是否在点击预览图后展示全屏图片预览
|
|
|
previewFullImage: {
|
|
|
type: Boolean,
|
|
@@ -633,11 +663,11 @@
|
|
|
|
|
|
.u-delete-icon {
|
|
|
position: absolute;
|
|
|
- top: 10rpx;
|
|
|
- right: 10rpx;
|
|
|
+ top: 0rpx;
|
|
|
+ right: 0rpx;
|
|
|
z-index: 10;
|
|
|
background-color: $u-type-error;
|
|
|
- border-radius: 100rpx;
|
|
|
+ border-radius:0 0 0 10rpx;
|
|
|
width: 44rpx;
|
|
|
height: 44rpx;
|
|
|
display: flex;
|
|
@@ -785,4 +815,17 @@
|
|
|
width:100%;height:100%;
|
|
|
z-index:10000;
|
|
|
}
|
|
|
+ .u-check-icon{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0rpx;
|
|
|
+ left: 0rpx;
|
|
|
+ z-index: 10;
|
|
|
+ background-color: $u-type-error;
|
|
|
+ border-radius:0 0 0 10rpx;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
</style>
|