1개의 변경된 파일과 120개의 추가작업 그리고 4개의 파일을 삭제
통합 보기
Diff Options
+ 120
- 4
src/views/core/base/equipment/components/AssetsUpload.vue
파일 보기
| @@ -7,8 +7,41 @@ | |||||
| <template> | <template> | ||||
| <div class="assets-upload"> | <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> | </template> | ||||
| <script> | <script> | ||||
| @@ -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> | |||||