lb #43

Merged
g7hoo merged 6 commits from lb into test 2023-10-13 17:06:02 +08:00
Showing only changes of commit b72fe1bfed - Show all commits

View File

@ -7,7 +7,40 @@
<template> <template>
<div class="assets-upload"> <div class="assets-upload">
asset upload <section class="operations">
<el-button type="text" class="expand-btn" @click="expand = !expand">
<i class="el-icon-folder-opened" v-if="expand"></i>
<i class="el-icon-folder" v-else></i>
展开
</el-button>
<div class="preview-btn">
<i class="el-icon-view"></i>
预览
</div>
</section>
<section class="file-area">
<el-upload class="equipment-upload" drag action="uploadUrl" multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<span>将文件拖到此处或</span>
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<!-- 只能上传jpg/png文件且不超过500kb -->
some tips....
</div>
</el-upload>
<div
class="file-list__item"
v-for="n in 9"
:key="n"
style="background: #f003"
:style="{
display: n > 4 && !expand ? 'none' : 'block',
}">
1
</div>
</section>
</div> </div>
</template> </template>
@ -32,6 +65,7 @@ export default {
emits: ['update-filelist'], emits: ['update-filelist'],
data() { data() {
return { return {
expand: false,
fileList: [], fileList: [],
}; };
}, },
@ -45,11 +79,93 @@ export default {
break; break;
} }
}, },
updateFileList(appendFilelist) { // Array updateFileList(appendFilelist) {
// Array
this.$emit('update-filelist', this.appendFilelist); this.$emit('update-filelist', this.appendFilelist);
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss">
.assets-upload {
position: relative;
}
.operations {
position: absolute;
top: -36px;
right: 0;
display: flex;
align-items: center;
}
.expand-btn,
.preview-btn {
font-size: 14px;
line-height: 1.2;
display: inline-block;
padding-left: 20px;
cursor: pointer;
z-index: 1000;
}
.expand-btn {
margin-right: 12px;
}
.preview-btn {
color: #ccc;
}
.expand-btn,
.preview-btn:hover,
.preview-btn.active {
// color: #0042d0;
color: #0b58ff;
}
:deep(.equipment-upload) {
background: #ccc4;
.el-upload-dragger {
width: 188px;
height: 128px;
}
.el-icon-upload {
margin: 12px 0;
font-size: 48px;
}
.el-upload__text {
font-size: 12px;
line-height: 2px;
display: flex;
flex-direction: column;
em {
margin-top: 12px;
}
}
.el-upload__tip {
margin: 0 0 12px;
transform: translateY(-12px);
user-select: none;
}
}
.file-list {
padding: 12px;
border: 1px solid #ccc;
}
// custom
.file-area {
display: grid;
grid-template-columns: repeat(5, 188px);
grid-auto-rows: 128px;
gap: 18px;
place-content: center;
}
</style>