New file |
| | |
| | | <template> |
| | | <div class="uploader-drop" :class="dropClass" ref="drop" v-show="support"> |
| | | <slot></slot> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { uploaderMixin, supportMixin } from './common/mixins' |
| | | |
| | | const COMPONENT_NAME = 'uploader-drop' |
| | | |
| | | export default { |
| | | name: COMPONENT_NAME, |
| | | mixins: [uploaderMixin, supportMixin], |
| | | data() { |
| | | return { |
| | | dropClass: '' |
| | | } |
| | | }, |
| | | methods: { |
| | | onDragEnter() { |
| | | this.dropClass = 'uploader-dragover' |
| | | }, |
| | | onDragLeave() { |
| | | this.dropClass = '' |
| | | }, |
| | | onDrop() { |
| | | this.dropClass = 'uploader-droped' |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | const dropEle = this.$refs.drop |
| | | const uploader = this.uploader.uploader |
| | | uploader.assignDrop(dropEle) |
| | | uploader.on('dragenter', this.onDragEnter) |
| | | uploader.on('dragleave', this.onDragLeave) |
| | | uploader.on('drop', this.onDrop) |
| | | }) |
| | | }, |
| | | beforeDestroy() { |
| | | const dropEle = this.$refs.drop |
| | | const uploader = this.uploader.uploader |
| | | uploader.off('dragenter', this.onDragEnter) |
| | | uploader.off('dragleave', this.onDragLeave) |
| | | uploader.off('drop', this.onDrop) |
| | | uploader.unAssignDrop(dropEle) |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .uploader-drop { |
| | | position: relative; |
| | | padding: 10px; |
| | | overflow: hidden; |
| | | border: 1px dashed #ccc; |
| | | background-color: #f5f5f5; |
| | | } |
| | | .uploader-dragover { |
| | | border-color: #999; |
| | | background-color: #f7f7f7; |
| | | } |
| | | </style> |