1 geänderte Dateien mit 120 neuen und 4 gelöschten Zeilen
+ 120
- 4
src/views/core/base/equipment/components/AssetsUpload.vue
Datei anzeigen
| @@ -7,8 +7,41 @@ | |||
| <template> | |||
| <div class="assets-upload"> | |||
| asset upload | |||
| </div> | |||
| <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> | |||
| </template> | |||
| <script> | |||
| @@ -32,6 +65,7 @@ export default { | |||
| emits: ['update-filelist'], | |||
| data() { | |||
| return { | |||
| expand: false, | |||
| fileList: [], | |||
| }; | |||
| }, | |||
| @@ -45,11 +79,93 @@ export default { | |||
| break; | |||
| } | |||
| }, | |||
| updateFileList(appendFilelist) { // Array | |||
| updateFileList(appendFilelist) { | |||
| // Array | |||
| this.$emit('update-filelist', this.appendFilelist); | |||
| }, | |||
| }, | |||
| }; | |||
| </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> | |||