{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\components\\Dropzone\\index.vue?vue&type=style&index=0&id=0248200e&scoped=true&lang=css&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\components\\Dropzone\\index.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5kcm9wem9uZSB7CiAgICBib3JkZXI6IDJweCBzb2xpZCAjRTVFNUU1OwogICAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCBzYW5zLXNlcmlmOwogICAgY29sb3I6ICM3Nzc7CiAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIC4ycyBsaW5lYXI7CiAgICBwYWRkaW5nOiA1cHg7Cn0KCi5kcm9wem9uZTpob3ZlciB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjRjZGNkY2Owp9CgppIHsKICAgIGNvbG9yOiAjQ0NDOwp9CgouZHJvcHpvbmUgLmR6LWltYWdlIGltZyB7CiAgICB3aWR0aDogMTAwJTsKICAgIGhlaWdodDogMTAwJTsKfQoKLmRyb3B6b25lIGlucHV0W25hbWU9J2ZpbGUnXSB7CiAgICBkaXNwbGF5OiBub25lOwp9CgouZHJvcHpvbmUgLmR6LXByZXZpZXcgLmR6LWltYWdlIHsKICAgIGJvcmRlci1yYWRpdXM6IDBweDsKfQoKLmRyb3B6b25lIC5kei1wcmV2aWV3OmhvdmVyIC5kei1pbWFnZSBpbWcgewogICAgdHJhbnNmb3JtOiBub25lOwogICAgZmlsdGVyOiBub25lOwogICAgd2lkdGg6IDEwMCU7CiAgICBoZWlnaHQ6IDEwMCU7Cn0KCi5kcm9wem9uZSAuZHotcHJldmlldyAuZHotZGV0YWlscyB7CiAgICBib3R0b206IDBweDsKICAgIHRvcDogMHB4OwogICAgY29sb3I6IHdoaXRlOwogICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgzMywgMTUwLCAyNDMsIDAuOCk7CiAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IC4ycyBsaW5lYXI7CiAgICB0ZXh0LWFsaWduOiBsZWZ0Owp9CgouZHJvcHpvbmUgLmR6LXByZXZpZXcgLmR6LWRldGFpbHMgLmR6LWZpbGVuYW1lIHNwYW4sIC5kcm9wem9uZSAuZHotcHJldmlldyAuZHotZGV0YWlscyAuZHotc2l6ZSBzcGFuIHsKICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50Owp9CgouZHJvcHpvbmUgLmR6LXByZXZpZXcgLmR6LWRldGFpbHMgLmR6LWZpbGVuYW1lOm5vdCg6aG92ZXIpIHNwYW4gewogICAgYm9yZGVyOiBub25lOwp9CgouZHJvcHpvbmUgLmR6LXByZXZpZXcgLmR6LWRldGFpbHMgLmR6LWZpbGVuYW1lOmhvdmVyIHNwYW4gewogICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7CiAgICBib3JkZXI6IG5vbmU7Cn0KCi5kcm9wem9uZSAuZHotcHJldmlldyAuZHotcmVtb3ZlIHsKICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgIHotaW5kZXg6IDMwOwogICAgY29sb3I6IHdoaXRlOwogICAgbWFyZ2luLWxlZnQ6IDE1cHg7CiAgICBwYWRkaW5nOiAxMHB4OwogICAgdG9wOiBpbmhlcml0OwogICAgYm90dG9tOiAxNXB4OwogICAgYm9yZGVyOiAycHggd2hpdGUgc29saWQ7CiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7CiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwogICAgZm9udC1zaXplOiAwLjhyZW07CiAgICBmb250LXdlaWdodDogODAwOwogICAgbGV0dGVyLXNwYWNpbmc6IDEuMXB4OwogICAgb3BhY2l0eTogMDsKfQoKLmRyb3B6b25lIC5kei1wcmV2aWV3OmhvdmVyIC5kei1yZW1vdmUgewogICAgb3BhY2l0eTogMTsKfQoKLmRyb3B6b25lIC5kei1wcmV2aWV3IC5kei1zdWNjZXNzLW1hcmssIC5kcm9wem9uZSAuZHotcHJldmlldyAuZHotZXJyb3ItbWFyayB7CiAgICBtYXJnaW4tbGVmdDogLTQwcHg7CiAgICBtYXJnaW4tdG9wOiAtNTBweDsKfQoKLmRyb3B6b25lIC5kei1wcmV2aWV3IC5kei1zdWNjZXNzLW1hcmsgaSwgLmRyb3B6b25lIC5kei1wcmV2aWV3IC5kei1lcnJvci1tYXJrIGkgewogICAgY29sb3I6IHdoaXRlOwogICAgZm9udC1zaXplOiA1cmVtOwp9Cg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgNA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/Dropzone","sourcesContent":["<template>\n  <div :id=\"id\" :ref=\"id\" :action=\"url\" class=\"dropzone\">\n    <input type=\"file\" name=\"file\">\n  </div>\n</template>\n\n<script>\nimport Dropzone from 'dropzone'\nimport 'dropzone/dist/dropzone.css'\n// import { getToken } from 'api/qiniu';\n\nDropzone.autoDiscover = false\n\nexport default {\n  props: {\n    id: {\n      type: String,\n      required: true\n    },\n    url: {\n      type: String,\n      required: true\n    },\n    clickable: {\n      type: Boolean,\n      default: true\n    },\n    defaultMsg: {\n      type: String,\n      default: '上传图片'\n    },\n    acceptedFiles: {\n      type: String,\n      default: ''\n    },\n    thumbnailHeight: {\n      type: Number,\n      default: 200\n    },\n    thumbnailWidth: {\n      type: Number,\n      default: 200\n    },\n    showRemoveLink: {\n      type: Boolean,\n      default: true\n    },\n    maxFilesize: {\n      type: Number,\n      default: 2\n    },\n    maxFiles: {\n      type: Number,\n      default: 3\n    },\n    autoProcessQueue: {\n      type: Boolean,\n      default: true\n    },\n    useCustomDropzoneOptions: {\n      type: Boolean,\n      default: false\n    },\n    defaultImg: {\n      default: '',\n      type: [String, Array]\n    },\n    couldPaste: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      dropzone: '',\n      initOnce: true\n    }\n  },\n  watch: {\n    defaultImg(val) {\n      if (val.length === 0) {\n        this.initOnce = false\n        return\n      }\n      if (!this.initOnce) return\n      this.initImages(val)\n      this.initOnce = false\n    }\n  },\n  mounted() {\n    const element = document.getElementById(this.id)\n    const vm = this\n    this.dropzone = new Dropzone(element, {\n      clickable: this.clickable,\n      thumbnailWidth: this.thumbnailWidth,\n      thumbnailHeight: this.thumbnailHeight,\n      maxFiles: this.maxFiles,\n      maxFilesize: this.maxFilesize,\n      dictRemoveFile: 'Remove',\n      addRemoveLinks: this.showRemoveLink,\n      acceptedFiles: this.acceptedFiles,\n      autoProcessQueue: this.autoProcessQueue,\n      dictDefaultMessage: '<i style=\"margin-top: 3em;display: inline-block\" class=\"material-icons\">' + this.defaultMsg + '</i><br>Drop files here to upload',\n      dictMaxFilesExceeded: '只能一个图',\n      previewTemplate: '<div class=\"dz-preview dz-file-preview\">  <div class=\"dz-image\" style=\"width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px\" ><img style=\"width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px\" data-dz-thumbnail /></div>  <div class=\"dz-details\"><div class=\"dz-size\"><span data-dz-size></span></div> <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>  <div class=\"dz-success-mark\"> <i class=\"material-icons\">done</i> </div>  <div class=\"dz-error-mark\"><i class=\"material-icons\">error</i></div></div>',\n      init() {\n        const val = vm.defaultImg\n        if (!val) return\n        if (Array.isArray(val)) {\n          if (val.length === 0) return\n          val.map((v, i) => {\n            const mockFile = { name: 'name' + i, size: 12345, url: v }\n            this.options.addedfile.call(this, mockFile)\n            this.options.thumbnail.call(this, mockFile, v)\n            mockFile.previewElement.classList.add('dz-success')\n            mockFile.previewElement.classList.add('dz-complete')\n            vm.initOnce = false\n            return true\n          })\n        } else {\n          const mockFile = { name: 'name', size: 12345, url: val }\n          this.options.addedfile.call(this, mockFile)\n          this.options.thumbnail.call(this, mockFile, val)\n          mockFile.previewElement.classList.add('dz-success')\n          mockFile.previewElement.classList.add('dz-complete')\n          vm.initOnce = false\n        }\n      },\n      accept: (file, done) => {\n        /* 七牛*/\n        // const token = this.$store.getters.token;\n        // getToken(token).then(response => {\n        //   file.token = response.data.qiniu_token;\n        //   file.key = response.data.qiniu_key;\n        //   file.url = response.data.qiniu_url;\n        //   done();\n        // })\n        done()\n      },\n      sending: (file, xhr, formData) => {\n        // formData.append('token', file.token);\n        // formData.append('key', file.key);\n        vm.initOnce = false\n      }\n    })\n\n    if (this.couldPaste) {\n      document.addEventListener('paste', this.pasteImg)\n    }\n\n    this.dropzone.on('success', file => {\n      vm.$emit('dropzone-success', file, vm.dropzone.element)\n    })\n    this.dropzone.on('addedfile', file => {\n      vm.$emit('dropzone-fileAdded', file)\n    })\n    this.dropzone.on('removedfile', file => {\n      vm.$emit('dropzone-removedFile', file)\n    })\n    this.dropzone.on('error', (file, error, xhr) => {\n      vm.$emit('dropzone-error', file, error, xhr)\n    })\n    this.dropzone.on('successmultiple', (file, error, xhr) => {\n      vm.$emit('dropzone-successmultiple', file, error, xhr)\n    })\n  },\n  destroyed() {\n    document.removeEventListener('paste', this.pasteImg)\n    this.dropzone.destroy()\n  },\n  methods: {\n    removeAllFiles() {\n      this.dropzone.removeAllFiles(true)\n    },\n    processQueue() {\n      this.dropzone.processQueue()\n    },\n    pasteImg(event) {\n      const items = (event.clipboardData || event.originalEvent.clipboardData).items\n      if (items[0].kind === 'file') {\n        this.dropzone.addFile(items[0].getAsFile())\n      }\n    },\n    initImages(val) {\n      if (!val) return\n      if (Array.isArray(val)) {\n        val.map((v, i) => {\n          const mockFile = { name: 'name' + i, size: 12345, url: v }\n          this.dropzone.options.addedfile.call(this.dropzone, mockFile)\n          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)\n          mockFile.previewElement.classList.add('dz-success')\n          mockFile.previewElement.classList.add('dz-complete')\n          return true\n        })\n      } else {\n        const mockFile = { name: 'name', size: 12345, url: val }\n        this.dropzone.options.addedfile.call(this.dropzone, mockFile)\n        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)\n        mockFile.previewElement.classList.add('dz-success')\n        mockFile.previewElement.classList.add('dz-complete')\n      }\n    }\n\n  }\n}\n</script>\n\n<style scoped>\n    .dropzone {\n        border: 2px solid #E5E5E5;\n        font-family: 'Roboto', sans-serif;\n        color: #777;\n        transition: background-color .2s linear;\n        padding: 5px;\n    }\n\n    .dropzone:hover {\n        background-color: #F6F6F6;\n    }\n\n    i {\n        color: #CCC;\n    }\n\n    .dropzone .dz-image img {\n        width: 100%;\n        height: 100%;\n    }\n\n    .dropzone input[name='file'] {\n        display: none;\n    }\n\n    .dropzone .dz-preview .dz-image {\n        border-radius: 0px;\n    }\n\n    .dropzone .dz-preview:hover .dz-image img {\n        transform: none;\n        filter: none;\n        width: 100%;\n        height: 100%;\n    }\n\n    .dropzone .dz-preview .dz-details {\n        bottom: 0px;\n        top: 0px;\n        color: white;\n        background-color: rgba(33, 150, 243, 0.8);\n        transition: opacity .2s linear;\n        text-align: left;\n    }\n\n    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {\n        background-color: transparent;\n    }\n\n    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {\n        border: none;\n    }\n\n    .dropzone .dz-preview .dz-details .dz-filename:hover span {\n        background-color: transparent;\n        border: none;\n    }\n\n    .dropzone .dz-preview .dz-remove {\n        position: absolute;\n        z-index: 30;\n        color: white;\n        margin-left: 15px;\n        padding: 10px;\n        top: inherit;\n        bottom: 15px;\n        border: 2px white solid;\n        text-decoration: none;\n        text-transform: uppercase;\n        font-size: 0.8rem;\n        font-weight: 800;\n        letter-spacing: 1.1px;\n        opacity: 0;\n    }\n\n    .dropzone .dz-preview:hover .dz-remove {\n        opacity: 1;\n    }\n\n    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {\n        margin-left: -40px;\n        margin-top: -50px;\n    }\n\n    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {\n        color: white;\n        font-size: 5rem;\n    }\n</style>\n"]}]}