<t
emplate>
<el
-dialog
title="设备导入"
:visible.sync="dialogVisible"
width="600
px"
:close
-on
-click
-modal="false"
>
<div class="dialog
-content">
<!
-- 上传区域
-->
<div class="upload
-section">
<el
-upload
action="/api/upload"
:on
-success="handleUploadSuccess"
:before
-upload="beforeUpload"
:limit="5"
:on
-exceed="handleExceed"
:file
-list="fileList"
multiple
drag
>
<i class="el
-icon
-upload"></i>
<div class="el
-upload__text">
<div>点击或拖拽文件到此处上传</div>
<div class="el
-upload__tip">支持.xlsx、.xls格式文件（最多5个）</div>
</div>
</el
-upload>
</div>
<!
-- 文件列表区域
- 重点突出
-->
<div class="file
-list
-section" v
-if="fileList.length">
<div class="section
-title">
<i class="el
-icon
-folder
-opened"></i>
<span>已上传文件列表</span>
<el
-tag type="success"
size="small">{{ fileList.length }}个文件</el
-tag>
</div>
<div class="file
-list">
<div
v
-for="(file, index) in fileList"
:key="index"
class="file
-it
em"
>
<div class="file
-icon">
<i class="el
-icon
-document"></i>
</div>
<div class="file
-info">
<div class="file
-name">{{ file.name }}</div>
<div class="file
-details">
<span class="file
-size">{{ formatFile
Size(file.
size) }}</span>
<span class="file
-status"
:class="file.status">{{ file.status || '已上传' }}</span>
</div>
</div>
<div class="file
-actions">
<el
-button
icon="el
-icon
-delete"
circle
size="mini"
@click="r
emoveFile(index)"
></el
-button>
</div>
</div>
</div>
</div>
<!
-- 空状态提示
-->
<div v
-else class="
empty
-state">
<i class="el
-icon
-folder
-opened"></i>
<p>尚未上传任何文件</p>
</div>
</div>
<!
-- 底部按钮
-->
<div slot="footer" class="dialog
-footer">
<el
-button @click="dialogVisible = false">取 消</el
-button>
<el
-button
type="primary"
@click="handleSubmit"
:disabled="!fileList.length"
>
开始导入 ({{ fileList.length }})
</el
-button>
</div>
</el
-dialog>
</t
emplate>
<scri
pt>
export default {
data() {
return {
dialogVisible
: false,
fileList
: []
};
},
methods
: {
init() {
this.dialogVisible = true;
this.fileList = [];
},
handleSubmit() {
// 提交逻辑
console.log('提交文件列表
:', this.fileList);
this.$message.success(`已提交 ${this.fileList.length} 个文件`);
},
handleUploadSuccess(response, file) {
// 添加上传状态
file.status = '上传成功';
this.$message.success(`${file.name} 上传成功`);
},
beforeUpload(file) {
// 文件类型验证
const isValidType = [
'application/vnd.openxmlformats
-officedocument.spreadsheetml.sheet',
'application/vnd.ms
-excel'
].includes(file.type);
if (!isValidType) {
this.$message.error('请上传Excel格式的文件 (.xlsx 或 .xls)');
return false;
}
// // 文件大小限制 (20MB)
// const isLt20M = file.
size / 1024 / 1024 < 20;
// if (!isLt20M) {
// this.$message.error('文件大小不能超过20MB');
// return false;
// }
// 添加初始状态
file.status = '等待上传';
return true;
},
handleExceed(files, fileList) {
this.$message.warning(`最多只能上传5个文件，您已选择${fileList.length}个文件`);
},
formatFile
Size(
size) {
if (
size < 1024) return
size + ' B';
if (
size < 1024 * 1024) return (
size / 1024).toFixed(1) + ' KB';
return (
size / (1024 * 1024)).toFixed(1) + ' MB';
},
// 删除文件
r
emoveFile(index) {
const r
emovedFile = this.fileList.splice(index, 1)[0];
this.$message.info(`已移除
: ${r
emovedFile.name}`);
}
}
};
</scri
pt>
<style scoped>
.dialog
-content {
padding
: 20
px;
}
/* 上传区域 */
.upload
-section {
margin
-bottom
: 25
px;
position
: relative;
display
: flex;
justify
-content
: center;
}
/* 文件列表区域
- 重点突出 */
.file
-list
-section {
border
: 1
px solid #ebeef5;
border
-radius
: 8
px;
padding
: 15
px;
background
-color
: #f8fafc;
margin
-top
: 20
px;
box
-shadow
: 0 2
px 8
px rgba(0,0,0,0.05);
}
.section
-title {
display
: flex;
align
-it
ems
: center;
margin
-bottom
: 15
px;
font-size: 16
px;
font-weight
: 500;
color
: #409EFF;
}
.section
-title i {
margin
-right
: 8
px;
font-size: 18
px;
}
.section
-title .el
-tag {
margin
-left
: 10
px;
}
/* 文件列表 */
.file
-list {
max
-height
: 300
px;
overflow
-y
: auto;
padding
-right
: 5
px;
}
.file
-it
em {
display
: flex;
align
-it
ems
: center;
padding
: 12
px;
background
-color
: white;
border
-radius
: 6
px;
margin
-bottom
: 10
px;
box
-shadow
: 0 1
px 3
px rgba(0,0,0,0.05);
transition
: all 0.3s;
}
.file
-it
em:hover {
background
-color
: #f0f7ff;
transform
: translateY(
-2
px);
box
-shadow
: 0 4
px 8
px rgba(0,0,0,0.08);
}
.file
-icon {
margin
-right
: 15
px;
}
.file
-icon i {
font-size: 28
px;
color
: #409EFF;
}
.file
-info {
flex
: 1;
min
-width
: 0; /* 防止内容溢出 */
}
.file
-name {
font-weight
: 500;
margin
-bottom
: 4
px;
overflow
: hidden;
text
-overflow
: ellipsis;
white
-space
: nowrap;
}
.file
-details {
display
: flex;
font-size: 12
px;
color
: #909399;
}
.file
-size {
margin
-right
: 15
px;
}
.file
-status {
font-weight
: 500;
}
.file
-status.上传成功 {
color
: #67C23A;
}
.file
-status.等待上传 {
color
: #E6A23C;
}
.file
-actions {
margin
-left
: 10
px;
}
/* 空状态 */
.
empty
-state {
text
-align
: center;
padding
: 30
px 0;
color
: #909399;
border
: 1
px dashed #ebeef5;
border
-radius
: 8
px;
margin
-top
: 20
px;
background
-color
: #f8fafc;
}
.
empty
-state i {
font-size: 48
px;
margin
-bottom
: 15
px;
display
: block;
color
: #dcdfe6;
}
.
empty
-state p {
margin
: 0;
font-size: 14
px;
}
/* 底部按钮 */
.dialog
-footer {
display
: flex;
justify
-content
: flex
-end;
padding
: 15
px 20
px;
border
-top
: 1
px solid #ebeef5;
}
</style>
未正常显示上传文件的列表
本文详细介绍了CSS中的字体单位，包括em、px、pt和%，并探讨了它们之间的换算关系及在不同设备上的表现效果。
扫一扫
2834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
