perf(uploader): expand delete area (#3265)

fix #3243
This commit is contained in:
rex 2020-06-09 21:23:43 +08:00 committed by GitHub
parent e16d611f94
commit 8456e58b46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 11 deletions

View File

@ -66,12 +66,20 @@
&-delete { &-delete {
position: absolute; position: absolute;
top: -8px; top: 0;
right: -8px; right: 0;
color: @uploader-delete-color; z-index: 1;
font-size: @uploader-delete-icon-size; display: flex;
background-color: @uploader-delete-background-color; padding: 10px;
border-radius: 100%; border-radius: 50%;
transform: translate(50%, -50%);
&__icon {
color: @uploader-delete-color;
font-size: @uploader-delete-icon-size;
background-color: @uploader-delete-background-color;
border-radius: 50%;
}
} }
} }

View File

@ -37,13 +37,14 @@
<van-loading wx:else class="van-uploader__loading" /> <van-loading wx:else class="van-uploader__loading" />
<text wx:if="{{ item.message }}" class="van-uploader__upload-text">{{ item.message }}</text> <text wx:if="{{ item.message }}" class="van-uploader__upload-text">{{ item.message }}</text>
</view> </view>
<van-icon <view
wx:if="{{ deletable }}" wx:if="{{ deletable }}"
name="clear"
class="van-uploader__preview-delete"
data-index="{{ index }}" data-index="{{ index }}"
class="van-uploader__preview-delete"
catch:tap="deleteItem" catch:tap="deleteItem"
/> >
<van-icon name="clear" class="van-uploader__preview-delete__icon" />
</view>
</view> </view>
<!-- 上传样式 --> <!-- 上传样式 -->
@ -57,7 +58,7 @@
wx:if="{{ showUpload }}" wx:if="{{ showUpload }}"
class="van-uploader__upload {{ disabled ? 'van-uploader__upload--disabled': ''}}" class="van-uploader__upload {{ disabled ? 'van-uploader__upload--disabled': ''}}"
style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};" style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
bind:tap="startUpload" bindtap="startUpload"
> >
<van-icon name="{{ uploadIcon }}" class="van-uploader__upload-icon" /> <van-icon name="{{ uploadIcon }}" class="van-uploader__upload-icon" />
<text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text> <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>