github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

fix upload file remove can't remove when auto-upload is false

pull/2944/merge
baiyaaaaa 2017-04-15 22:45:57 +08:00 committed by 杨奕
parent 7d5da7575d
commit bcbd94f460
2 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/theme-default/src/upload.css
View File

@ -129,28 +129,33 @@
&:first-child { &:first-child {
margin-top: 10px; margin-top: 10px;
} }
& .el-icon-check,
& .el-icon-circle-check {
color: var(--color-success);
}
& .el-icon-close {
display: none;
cursor: pointer;
opacity: .75;
transform: scale(.7);
color: var(--color-extra-light-black);
&:hover {
opacity: 1;
}
}
&:hover { &:hover {
background-color: var(--color-extra-light-gray); background-color: var(--color-extra-light-gray);
.el-icon-close {
display: inline-block;
}
} }
@when success { @when success {
.el-upload-list__item-name:hover { .el-upload-list__item-name:hover {
color: var(--link-hover-color); color: var(--link-hover-color);
cursor: pointer; cursor: pointer;
} }
.el-icon-close {
display: none;
}
&:hover { &:hover {
.el-icon-close {
display: inline-block;
cursor: pointer;
opacity: .75;
transform: scale(.7);
color: var(--color-extra-light-black);
&:hover {
opacity: 1;
}
}
.el-icon-circle-check, .el-icon-circle-check,
.el-icon-check { .el-icon-check {
display: none; display: none;
@ -180,7 +185,6 @@
right: 10px; right: 10px;
top: 0; top: 0;
line-height: inherit; line-height: inherit;
color: var(--color-success);
} }
@e item-delete { @e item-delete {
position: absolute; position: absolute;
@ -210,6 +214,11 @@
margin: 0 8px 8px 0; margin: 0 8px 8px 0;
display: inline-block; display: inline-block;
& .el-icon-check,
& .el-icon-circle-check {
color: var(--color-white);
}
&:hover .el-upload-list__item-status-label { &:hover .el-upload-list__item-status-label {
display: none; display: none;
} }
@ -236,7 +245,6 @@
font-size: 12px; font-size: 12px;
margin-top: 11px; margin-top: 11px;
transform: rotate(-45deg) scale(0.8); transform: rotate(-45deg) scale(0.8);
color: #fff;
} }
} }
.el-upload-list__item-actions { .el-upload-list__item-actions {
@ -298,6 +306,10 @@
padding: 10px 10px 10px 90px; padding: 10px 10px 10px 90px;
height: 92px; height: 92px;
& .el-icon-check,
& .el-icon-circle-check {
color: var(--color-white);
}
&:hover { &:hover {
.el-upload-list__item-status-label { .el-upload-list__item-status-label {
background: transparent; background: transparent;
@ -356,7 +368,6 @@
font-size: 12px; font-size: 12px;
margin-top: 12px; margin-top: 12px;
transform: rotate(-45deg) scale(0.8); transform: rotate(-45deg) scale(0.8);
color: #fff;
} }
} }
.el-progress { .el-progress {

8
packages/upload/src/upload-list.vue
View File

@ -17,11 +17,13 @@
<a class="el-upload-list__item-name" @click="handleClick(file)"> <a class="el-upload-list__item-name" @click="handleClick(file)">
<i class="el-icon-document"></i>{{file.name}} <i class="el-icon-document"></i>{{file.name}}
</a> </a>
<label v-show="file.status === 'success'" class="el-upload-list__item-status-label"> <label class="el-upload-list__item-status-label">
<i :class="{ <i v-if="file.status === 'success'"
:class="{
'el-icon-circle-check': listType === 'text', 'el-icon-circle-check': listType === 'text',
'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1 'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
}"></i> }">
</i>
<i class="el-icon-close" @click="$emit('remove', file)"></i> <i class="el-icon-close" @click="$emit('remove', file)"></i>
</label> </label>
<span class="el-upload-list__item-actions" <span class="el-upload-list__item-actions"