mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-26 04:27:26 +08:00
refactor(theme-chalk): [upload] use bem rewrite upload scss & fix bugs (#6508)
Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
This commit is contained in:
云游君
@ -7,7 +7,7 @@
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
|
||||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
@ -15,17 +15,18 @@
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
|
||||
import type {
|
||||
UploadFile,
|
||||
ElUploadProgressEvent,
|
||||
ElFile,
|
||||
} from 'element-plus/es/components/upload/src/upload.type'
|
||||
UploadRawFile,
|
||||
UploadProgressEvent,
|
||||
} from 'element-plus'
|
||||
|
||||
const imageUrl = ref('')
|
||||
const handleAvatarSuccess = (res: ElUploadProgressEvent, file: UploadFile) => {
|
||||
imageUrl.value = URL.createObjectURL(file.raw)
|
||||
const handleAvatarSuccess = (res: UploadProgressEvent, file: UploadFile) => {
|
||||
imageUrl.value = URL.createObjectURL(file.raw!)
|
||||
}
|
||||
const beforeAvatarUpload = (file: ElFile) => {
|
||||
const beforeAvatarUpload = (file: UploadRawFile) => {
|
||||
const isJPG = file.type === 'image/jpeg'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
@ -46,9 +47,10 @@ const beforeAvatarUpload = (file: ElFile) => {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.el-icon.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
|
||||
@ -21,14 +21,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { UploadFile } from 'element-plus/es/components/upload/src/upload.type'
|
||||
|
||||
interface RawFile {
|
||||
name: string
|
||||
url: string
|
||||
}
|
||||
import type { UploadUserFile, UploadFile } from 'element-plus'
|
||||
|
||||
const fileList = ref<RawFile[]>([
|
||||
const fileList = ref<UploadUserFile[]>([
|
||||
{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
@ -45,7 +41,7 @@ const handleRemove = (file: UploadFile, fileList: UploadFile[]) => {
|
||||
const handlePreview = (file: UploadFile) => {
|
||||
console.log(file)
|
||||
}
|
||||
const handleExceed = (files: FileList, fileList: UploadFile[]) => {
|
||||
const handleExceed = (files: File[], fileList: UploadFile[]) => {
|
||||
ElMessage.warning(
|
||||
`The limit is 3, you selected ${files.length} files this time, add up to ${
|
||||
files.length + fileList.length
|
||||
@ -53,6 +49,9 @@ const handleExceed = (files: FileList, fileList: UploadFile[]) => {
|
||||
)
|
||||
}
|
||||
const beforeRemove = (file: UploadFile, fileList: UploadFile[]) => {
|
||||
return ElMessageBox.confirm(`Cancel the transfert of ${file.name} ?`)
|
||||
return ElMessageBox.confirm(`Cancel the transfert of ${file.name} ?`).then(
|
||||
() => true,
|
||||
() => false
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -38,7 +38,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { Plus, ZoomIn, Download, Delete } from '@element-plus/icons-vue'
|
||||
import type { UploadFile } from 'element-plus/es/components/upload/src/upload.type'
|
||||
|
||||
import type { UploadFile } from 'element-plus'
|
||||
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
@ -17,9 +17,10 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import type { UploadFile } from 'element-plus/es/components/upload/src/upload.type'
|
||||
|
||||
const fileList = ref([
|
||||
import type { UploadFile, UploadUserFile } from 'element-plus'
|
||||
|
||||
const fileList = ref<UploadUserFile[]>([
|
||||
{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
|
||||
@ -15,9 +15,10 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import type { UploadFile } from 'element-plus/es/components/upload/src/upload.type'
|
||||
|
||||
const fileList = ref([
|
||||
import type { UploadFile, UploadUserFile } from 'element-plus'
|
||||
|
||||
const fileList = ref<UploadUserFile[]>([
|
||||
{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
|
||||
@ -4,17 +4,31 @@
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
<img style="width: 100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import type { UploadFile } from 'element-plus/es/components/upload/src/upload.type'
|
||||
|
||||
import type { UploadFile, UploadUserFile } from 'element-plus'
|
||||
|
||||
const fileList = ref<UploadUserFile[]>([
|
||||
{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
},
|
||||
{
|
||||
name: 'food2.jpeg',
|
||||
url: '/images/guide.png',
|
||||
},
|
||||
])
|
||||
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
@ -25,17 +25,33 @@
|
||||
<slot :file="file">
|
||||
<img
|
||||
v-if="
|
||||
file.status !== 'uploading' &&
|
||||
['picture-card', 'picture'].includes(listType)
|
||||
listType === 'picture' ||
|
||||
(file.status !== 'uploading' && listType === 'picture-card')
|
||||
"
|
||||
:class="nsUpload.be('list', 'item-thumbnail')"
|
||||
:src="file.url"
|
||||
alt=""
|
||||
/>
|
||||
<a :class="nsUpload.be('list', 'item-name')" @click="handleClick(file)">
|
||||
<el-icon :class="nsIcon.m('document')"><Document /></el-icon>
|
||||
{{ file.name }}
|
||||
</a>
|
||||
<div
|
||||
v-if="file.status === 'uploading' || listType !== 'picture-card'"
|
||||
:class="nsUpload.be('list', 'item-info')"
|
||||
>
|
||||
<a
|
||||
:class="nsUpload.be('list', 'item-name')"
|
||||
@click="handleClick(file)"
|
||||
>
|
||||
<el-icon :class="nsIcon.m('document')"><Document /></el-icon>
|
||||
{{ file.name }}
|
||||
</a>
|
||||
<el-progress
|
||||
v-if="file.status === 'uploading'"
|
||||
:type="listType === 'picture-card' ? 'circle' : 'line'"
|
||||
:stroke-width="listType === 'picture-card' ? 6 : 2"
|
||||
:percentage="Number(file.percentage)"
|
||||
:style="listType === 'picture-card' ? '' : 'margin-top: 0.5rem'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label :class="nsUpload.be('list', 'item-status-label')">
|
||||
<el-icon
|
||||
v-if="listType === 'text'"
|
||||
@ -63,13 +79,6 @@
|
||||
<i v-if="!disabled" :class="nsIcon.m('close-tip')">{{
|
||||
t('el.upload.deleteTip')
|
||||
}}</i>
|
||||
<el-progress
|
||||
v-if="file.status === 'uploading'"
|
||||
:type="listType === 'picture-card' ? 'circle' : 'line'"
|
||||
:stroke-width="listType === 'picture-card' ? 6 : 2"
|
||||
:percentage="Number(file.percentage)"
|
||||
style="margin-top: 0.5rem"
|
||||
/>
|
||||
<span
|
||||
v-if="listType === 'picture-card'"
|
||||
:class="nsUpload.be('list', 'item-actions')"
|
||||
|
||||
@ -61,7 +61,7 @@ export const useHandlers = (
|
||||
|
||||
props.onProgress(evt, file, uploadFiles.value)
|
||||
file.status = 'uploading'
|
||||
file.percentage = evt.percent
|
||||
file.percentage = Math.round(evt.percent)
|
||||
}
|
||||
|
||||
const handleSuccess: UploadContentProps['onSuccess'] = (
|
||||
|
||||
@ -31,11 +31,7 @@
|
||||
// set all css var for component by map
|
||||
@mixin set-component-css-var($name, $variables) {
|
||||
@each $attribute, $value in $variables {
|
||||
@if $attribute == '' {
|
||||
#{getCssVarName($name)}: #{$value};
|
||||
} @else {
|
||||
#{getCssVarName($name, $attribute)}: #{$value};
|
||||
}
|
||||
#{getCssVarName($name, $attribute)}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
$namespace: 'el';
|
||||
$common-separator: '-';
|
||||
$element-separator: '__';
|
||||
$modifier-separator: '--';
|
||||
$state-prefix: 'is-';
|
||||
|
||||
@ -63,3 +63,19 @@
|
||||
@function getCssVar($args...) {
|
||||
@return var(#{joinVarName($args)});
|
||||
}
|
||||
|
||||
// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
|
||||
@function bem($block, $element: '', $modifier: '') {
|
||||
$name: config.$namespace + config.$common-separator + $block;
|
||||
|
||||
@if $element != '' {
|
||||
$name: $name + config.$element-separator + $element;
|
||||
}
|
||||
|
||||
@if $modifier != '' {
|
||||
$name: $name + config.$modifier-separator + $modifier;
|
||||
}
|
||||
|
||||
// @debug $name;
|
||||
@return $name;
|
||||
}
|
||||
|
||||
@ -31,3 +31,9 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin utils-flex-center {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
@use 'common/var' as *;
|
||||
|
||||
@include b(upload) {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
@include utils-flex-center;
|
||||
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
@include e(input) {
|
||||
@ -26,19 +26,24 @@
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
/* 照片墙模式 */
|
||||
/* Picture Card for Wall */
|
||||
@include m(picture-card) {
|
||||
#{getCssVarName('upload', 'picture-card', 'size')}: 148px;
|
||||
|
||||
background-color: #fbfdff;
|
||||
border: 1px dashed #c0ccda;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
width: getCssVar('upload', 'picture-card', 'size');
|
||||
height: getCssVar('upload', 'picture-card', 'size');
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin-top: 59px; /* (148px - 28px) / 2 - 1px */
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
}
|
||||
@ -48,6 +53,7 @@
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
@ -70,24 +76,24 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.#{$namespace}-icon--upload {
|
||||
.#{bem('icon', '', 'upload')} {
|
||||
font-size: 67px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
margin: 40px 0 16px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
+ .#{$namespace}-upload__tip {
|
||||
+ .#{bem('upload', 'tip')} {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
~ .#{$namespace}-upload__files {
|
||||
~ .#{bem('upload', 'files')} {
|
||||
border-top: $border-base;
|
||||
margin-top: 7px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.#{$namespace}-upload__text {
|
||||
.#{bem('upload', 'text')} {
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
@ -117,57 +123,59 @@
|
||||
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: 1.8;
|
||||
margin-top: 5px;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
|
||||
.#{$namespace}-progress {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px;
|
||||
|
||||
.#{bem('progress')} {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{$namespace}-progress__text {
|
||||
.#{bem('progress', 'text')} {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -13px;
|
||||
}
|
||||
|
||||
.#{$namespace}-progress-bar {
|
||||
.#{bem('progress-bar')} {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
& .#{$namespace}-icon--upload-success {
|
||||
& .#{bem('icon', '', 'upload-success')} {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
|
||||
.#{$namespace}-icon--close {
|
||||
.#{bem('icon', '', 'close')} {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
color: var(--el-text-color-regular);
|
||||
//transform: scale(.7);
|
||||
transition: opacity var(--el-transition-duration);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
& .#{$namespace}-icon--close-tip {
|
||||
& .#{bem('icon', '', 'close-tip')} {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
@ -178,22 +186,30 @@
|
||||
&:hover {
|
||||
background-color: var(--el-bg-color);
|
||||
|
||||
.#{$namespace}-icon--close {
|
||||
display: inline-block;
|
||||
.#{bem('icon', '', 'close')} {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.#{$namespace}-progress__text {
|
||||
.#{bem('progress', 'text')} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{bem('upload-list', 'item-info')} {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@include when(success) {
|
||||
.#{$namespace}-upload-list__item-status-label {
|
||||
display: block;
|
||||
.#{bem('upload-list', 'item-status-label')} {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-name:hover,
|
||||
.#{$namespace}-upload-list__item-name:focus {
|
||||
.#{bem('upload-list', 'item-name')}:hover,
|
||||
.#{bem('upload-list', 'item-name')}:focus {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -214,39 +230,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.#{$namespace}-upload-list__item-status-label {
|
||||
&:hover {
|
||||
.#{bem('upload-list', 'item-status-label')} {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.#{$namespace}-upload-list__item:hover
|
||||
.#{$namespace}-upload-list__item-status-label {
|
||||
.#{bem('upload-list', 'item')}:hover,
|
||||
.#{bem('upload-list', 'item-status-label')} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(item-name) {
|
||||
color: var(--el-text-color-regular);
|
||||
display: block;
|
||||
margin-right: 40px;
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 4px;
|
||||
|
||||
overflow: hidden;
|
||||
padding-left: 4px;
|
||||
text-overflow: ellipsis;
|
||||
transition: color var(--el-transition-duration);
|
||||
white-space: nowrap;
|
||||
font-size: var(--el-font-size-base);
|
||||
|
||||
& .#{$namespace}-icon {
|
||||
margin-right: 7px;
|
||||
.#{$namespace}-icon {
|
||||
margin-right: 6px;
|
||||
color: var(--el-text-color-secondary);
|
||||
|
||||
svg {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -256,6 +272,12 @@
|
||||
top: 0;
|
||||
line-height: inherit;
|
||||
display: none;
|
||||
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition: opacity var(--el-transition-duration);
|
||||
}
|
||||
|
||||
@include e(item-delete) {
|
||||
@ -272,32 +294,36 @@
|
||||
}
|
||||
|
||||
@include m(picture-card) {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
display: inline-flex;
|
||||
|
||||
.#{$namespace}-upload-list__item {
|
||||
#{getCssVarName('upload-list', 'picture-card', 'size')}: 148px;
|
||||
|
||||
.#{bem('upload-list', 'item')} {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border: 1px solid #c0ccda;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
width: getCssVar('upload-list', 'picture-card', 'size');
|
||||
height: getCssVar('upload-list', 'picture-card', 'size');
|
||||
margin: 0 8px 8px 0;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
.#{$namespace}-icon--check,
|
||||
.#{$namespace}-icon--circle-check {
|
||||
display: inline-flex;
|
||||
|
||||
.#{bem('icon', '' ,'check')},
|
||||
.#{bem('icon', '' ,'circle-check')} {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.#{$namespace}-icon--close {
|
||||
.#{bem('icon', '', 'close')} {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.#{$namespace}-upload-list__item-status-label {
|
||||
display: none;
|
||||
.#{bem('upload-list', 'item-status-label')} {
|
||||
opacity: 0;
|
||||
// for fade out
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{$namespace}-progress__text {
|
||||
@ -306,23 +332,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-name {
|
||||
display: none;
|
||||
.#{bem('upload-list', 'item')} {
|
||||
.#{bem('upload-list', 'item-name')} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-thumbnail {
|
||||
.#{bem('upload-list', 'item-thumbnail')} {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-status-label {
|
||||
.#{bem('upload-list', 'item-status-label')} {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: -6px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
background: #13ce66;
|
||||
background: var(--el-color-success);
|
||||
text-align: center;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
|
||||
@ -334,25 +362,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-actions {
|
||||
.#{bem('upload-list', 'item-actions')} {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
font-size: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transition: opacity var(--el-transition-duration);
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
@ -360,10 +386,10 @@
|
||||
}
|
||||
|
||||
span + span {
|
||||
margin-left: 15px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-delete {
|
||||
.#{bem('upload-list', 'item-delete')} {
|
||||
position: static;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
@ -372,12 +398,12 @@
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
span {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-progress {
|
||||
.#{bem('progress')} {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@ -391,7 +417,7 @@
|
||||
}
|
||||
|
||||
@include m(picture) {
|
||||
.#{$namespace}-upload-list__item {
|
||||
.#{bem('upload-list', 'item')} {
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
background-color: #fff;
|
||||
@ -399,73 +425,63 @@
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
padding: 10px 10px 10px 90px;
|
||||
padding: 10px;
|
||||
height: 92px;
|
||||
|
||||
.#{$namespace}-icon--check,
|
||||
.#{$namespace}-icon--circle-check {
|
||||
.#{bem('icon', '' ,'check')},
|
||||
.#{bem('icon', '' ,'circle-check')} {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.#{$namespace}-upload-list__item-status-label {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
top: -2px;
|
||||
right: -12px;
|
||||
.#{bem('upload-list', 'item-status-label')} {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{$namespace}-progress__text {
|
||||
.#{bem('progress', 'text')} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
.#{$namespace}-upload-list__item-name {
|
||||
line-height: 70px;
|
||||
margin-top: 0;
|
||||
.#{bem('upload-list', 'item-name')} {
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{bem('icon', '' ,'close')} {
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-thumbnail {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
float: left;
|
||||
.#{bem('upload-list', 'item-thumbnail')} {
|
||||
$item-thumbnail-size: 70px;
|
||||
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: $item-thumbnail-size;
|
||||
height: $item-thumbnail-size;
|
||||
object-fit: contain;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-left: -80px;
|
||||
background-color: $color-white;
|
||||
background-color: var(--el-color-white);
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-name {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
|
||||
i {
|
||||
font-size: 70px;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-upload-list__item-status-label {
|
||||
.#{bem('upload-list', 'item-status-label')} {
|
||||
position: absolute;
|
||||
right: -17px;
|
||||
top: -7px;
|
||||
width: 46px;
|
||||
height: 26px;
|
||||
background: #13ce66;
|
||||
background: var(--el-color-success);
|
||||
text-align: center;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 1px 1px #ccc;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
@ -504,10 +520,10 @@
|
||||
top: -6px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
background: #13ce66;
|
||||
background: var(--el-color-success);
|
||||
text-align: center;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
@ -523,7 +539,7 @@
|
||||
position: static;
|
||||
width: 243px;
|
||||
|
||||
+ .#{$namespace}-upload__inner {
|
||||
+ .#{bem('upload', 'inner')} {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -604,7 +620,7 @@
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
+ .#{$namespace}-upload__inner {
|
||||
+ .#{bem('upload', 'inner')} {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
Reference in New Issue
Block a user