{"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"]}]}
|
