| | |
| | | </el-upload>
|
| | |
|
| | | <!-- 文件列表 -->
|
| | | <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
| | | <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
| | | <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
|
| | | <el-link :href="file.url" :underline="false" target="_blank">
|
| | | <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
| | |
| | |
|
| | | <script>
|
| | | import { getToken } from "@/utils/auth"
|
| | | import Sortable from 'sortablejs'
|
| | |
|
| | | export default {
|
| | | name: "FileUpload",
|
| | |
| | | disabled: {
|
| | | type: Boolean,
|
| | | default: false
|
| | | },
|
| | | // 拖动排序
|
| | | drag: {
|
| | | type: Boolean,
|
| | | default: true
|
| | | }
|
| | | },
|
| | | data() {
|
| | |
| | | headers: {
|
| | | Authorization: "Bearer " + getToken(),
|
| | | },
|
| | | fileList: [],
|
| | | fileList: []
|
| | | }
|
| | | },
|
| | | mounted() {
|
| | | if (this.drag) {
|
| | | this.$nextTick(() => {
|
| | | const element = this.$refs.uploadFileList?.$el || this.$refs.uploadFileList
|
| | | Sortable.create(element, {
|
| | | ghostClass: 'file-upload-darg',
|
| | | onEnd: (evt) => {
|
| | | const movedItem = this.fileList.splice(evt.oldIndex, 1)[0]
|
| | | this.fileList.splice(evt.newIndex, 0, movedItem)
|
| | | this.$emit("input", this.listToString(this.fileList))
|
| | | }
|
| | | })
|
| | | })
|
| | | }
|
| | | },
|
| | | watch: {
|
| | |
| | | </script>
|
| | |
|
| | | <style scoped lang="scss">
|
| | | .file-upload-darg {
|
| | | opacity: 0.5;
|
| | | background: #c8ebfb;
|
| | | }
|
| | | .upload-file-uploader {
|
| | | margin-bottom: 5px;
|
| | | }
|