UNPKG

kingdot

Version:

A UI Components Library For Vue

950 lines (872 loc) 29 kB
module.exports = /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "/dist/"; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 217); /******/ }) /************************************************************************/ /******/ ({ /***/ 0: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; }); /* globals __VUE_SSR_CONTEXT__ */ // IMPORTANT: Do NOT use ES2015 features in this file (except for modules). // This module is a runtime utility for cleaner component module output and will // be included in the final webpack user bundle. function normalizeComponent ( scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, /* server only */ shadowMode /* vue-cli only */ ) { // Vue.extend constructor export interop var options = typeof scriptExports === 'function' ? scriptExports.options : scriptExports // render functions if (render) { options.render = render options.staticRenderFns = staticRenderFns options._compiled = true } // functional template if (functionalTemplate) { options.functional = true } // scopedId if (scopeId) { options._scopeId = 'data-v-' + scopeId } var hook if (moduleIdentifier) { // server build hook = function (context) { // 2.3 injection context = context || // cached call (this.$vnode && this.$vnode.ssrContext) || // stateful (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional // 2.2 with runInNewContext: true if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { context = __VUE_SSR_CONTEXT__ } // inject component styles if (injectStyles) { injectStyles.call(this, context) } // register component module identifier for async chunk inferrence if (context && context._registeredComponents) { context._registeredComponents.add(moduleIdentifier) } } // used by ssr in case component is cached and beforeCreate // never gets called options._ssrRegister = hook } else if (injectStyles) { hook = shadowMode ? function () { injectStyles.call( this, (options.functional ? this.parent : this).$root.$options.shadowRoot ) } : injectStyles } if (hook) { if (options.functional) { // for template-only hot-reload because in that case the render fn doesn't // go through the normalizer options._injectStyles = hook // register for functional component in vue file var originalRender = options.render options.render = function renderWithStyleInjection (h, context) { hook.call(context) return originalRender(h, context) } } else { // inject component registration as beforeCreate hook var existing = options.beforeCreate options.beforeCreate = existing ? [].concat(existing, hook) : [hook] } } return { exports: scriptExports, options: options } } /***/ }), /***/ 217: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; // ESM COMPAT FLAG __webpack_require__.r(__webpack_exports__); // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/Upload/upload.vue?vue&type=template&id=65ec5a32& var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"kd-upload"},[(_vm.listType==='picture-card' && _vm.showFileList)?_c('transition-group',{staticClass:"kd-upload-list-picture",attrs:{"tag":"ul"}},_vm._l((_vm.fileList),function(file){return _c('li',{key:file.uid,staticClass:"kd-upload-picture-item"},[_vm._t("file",[_c('div',{staticClass:"kd-upload-pictureitem-wrap"},[_c('img',{attrs:{"src":file.url}}),_c('div',{staticClass:"kd-upload-pictureitem-pop"},[_c('i',{staticClass:"kd-icon-delete kd-upload-photo-icon",on:{"click":function($event){return _vm.handleRemove(file)}}})])])],{"file":file})],2)}),0):_vm._e(),_c('div',{staticClass:"kd-upload-btn-wrap",on:{"click":_vm.handleClick}},[(_vm.drag)?_c('upload-drag',{on:{"dropFiles":_vm.updateFile}},[_vm._t("default")],2):_vm._e(),(!_vm.drag)?_vm._t("default"):_vm._e(),_c('input',{ref:"uploadInput",staticClass:"kd-upload-input",attrs:{"type":"file","multiple":_vm.multiple,"accept":_vm.accept},on:{"change":_vm.handleChange}})],2),_vm._t("other"),_vm._t("tip",[_c('div',{staticClass:"kd-upload-tip"},[_vm._v(_vm._s(_vm.tip))])]),(_vm.listType!== 'picture-card' && _vm.showFileList)?_c('upload-list',{attrs:{"list-type":_vm.listType,"file-list":_vm.fileList,"chunk":_vm.chunk},on:{"handleRemove":_vm.handleRemove,"uploadSwitch":_vm.uploadSwitch}}):_vm._e()],2)} var staticRenderFns = [] // CONCATENATED MODULE: ./components/Upload/upload.vue?vue&type=template&id=65ec5a32& // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/Upload/upload-drag.vue?vue&type=template&id=792b9a10& var upload_dragvue_type_template_id_792b9a10_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"kd-upload-drag",on:{"drop":function($event){$event.preventDefault();return _vm.onDrop($event)},"dragover":function($event){$event.preventDefault();return _vm.onDragover($event)},"dragleave":function($event){$event.preventDefault();return _vm.onDragleave($event)}}},[_vm._t("default",[_c('i',{staticClass:"kd-upload-drag-icon kd-icon-path"}),_c('span',{staticClass:"kd-upload-drag-tip"},[_vm._v("点击或将文件拖拽到这里上传")])])],2)} var upload_dragvue_type_template_id_792b9a10_staticRenderFns = [] // CONCATENATED MODULE: ./components/Upload/upload-drag.vue?vue&type=template&id=792b9a10& // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/Upload/upload-drag.vue?vue&type=script&lang=js& // // // // // // // // // // // // // // /* harmony default export */ var upload_dragvue_type_script_lang_js_ = ({ name: 'UploadDrag', methods: { onDrop: function onDrop(e) { var files = e.dataTransfer.files; this.$emit('dropFiles', files); }, onDragover: function onDragover(e) {}, onDragleave: function onDragleave(e) {} } }); // CONCATENATED MODULE: ./components/Upload/upload-drag.vue?vue&type=script&lang=js& /* harmony default export */ var Upload_upload_dragvue_type_script_lang_js_ = (upload_dragvue_type_script_lang_js_); // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js var componentNormalizer = __webpack_require__(0); // CONCATENATED MODULE: ./components/Upload/upload-drag.vue /* normalize component */ var component = Object(componentNormalizer["a" /* default */])( Upload_upload_dragvue_type_script_lang_js_, upload_dragvue_type_template_id_792b9a10_render, upload_dragvue_type_template_id_792b9a10_staticRenderFns, false, null, null, null ) /* harmony default export */ var upload_drag = (component.exports); // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/Upload/upload-list.vue?vue&type=template&id=9eec7632& var upload_listvue_type_template_id_9eec7632_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition-group',{staticClass:"kd-upload-list-wrap",attrs:{"name":"kd-translateY","tag":"ul"}},_vm._l((_vm.fileList),function(file){return _c('li',{key:file.uid,staticClass:"kd-upload-list-item",class:{'kd-upload-item-uploading':file.progress !== 100 && file.progress},attrs:{"transition":"fade"}},[_c('div',{staticClass:"kd-upload-item-wrap"},[_c('span',{staticClass:"kd-upload-list-name"},[_c('i',{staticClass:"kd-upload-icon kd-file-icon kd-icon-upload-file"}),_vm._v("\n "+_vm._s(file.name)+"\n ")]),_c('i',{staticClass:"kd-upload-icon kd-upload-list-delete kd-upload-status-icon kd-icon-close",on:{"click":function($event){return _vm.$emit('handleRemove',file)}}}),(file.status =='success')?_c('i',{staticClass:"kd-upload-icon kd-upload-status-icon kd-icon-success-solid"}):_vm._e(),(file.status =='error')?_c('i',{staticClass:"kd-upload-icon kd-upload-status-icon kd-icon-error-solid"}):_vm._e()]),(file.progress !== 100 && file.progress)?_c('div',{staticClass:"kd-upload-progress"},[_c('kd-progress',{attrs:{"type":"line","percentage":file.progress,"active":true,"stroke-width":2,"status":"error","color":"#557DFC"}}),_c('div',{staticClass:"kd-upload-progress-wrap"},[_c('div',{staticClass:"kd-upload-progress-value"},[_vm._v(" "+_vm._s(!file.uploadStop?file.progress + '%':'已暂停'))]),(_vm.chunk)?_c('i',{class:['kd-upload-progress-stop',!file.uploadStop?'kd-icon-video-pause':'kd-icon-video-play'],on:{"click":function($event){return _vm.$emit('uploadSwitch',file)}}}):_vm._e()])],1):_vm._e()])}),0)} var upload_listvue_type_template_id_9eec7632_staticRenderFns = [] // CONCATENATED MODULE: ./components/Upload/upload-list.vue?vue&type=template&id=9eec7632& // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/Upload/upload-list.vue?vue&type=script&lang=js& // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // /* harmony default export */ var upload_listvue_type_script_lang_js_ = ({ name: 'UploadList', props: { listType: { type: String, default: '' }, fileList: { type: Array, default: function _default() { return []; } }, chunk: { type: Boolean, default: false } } }); // CONCATENATED MODULE: ./components/Upload/upload-list.vue?vue&type=script&lang=js& /* harmony default export */ var Upload_upload_listvue_type_script_lang_js_ = (upload_listvue_type_script_lang_js_); // CONCATENATED MODULE: ./components/Upload/upload-list.vue /* normalize component */ var upload_list_component = Object(componentNormalizer["a" /* default */])( Upload_upload_listvue_type_script_lang_js_, upload_listvue_type_template_id_9eec7632_render, upload_listvue_type_template_id_9eec7632_staticRenderFns, false, null, null, null ) /* harmony default export */ var upload_list = (upload_list_component.exports); // CONCATENATED MODULE: ./components/Upload/ajax.js function getBody(xhr) { var text = xhr.responseText || xhr.response; // if (!text) { // return text; // } try { return JSON.parse(text); } catch (e) { return text; } } function getError(action, options, xhr) { var msg = void 0; if (xhr.response) { msg = '' + (xhr.response.error || xhr.response); } else if (xhr.responseText) { msg = '' + xhr.responseText; } else { msg = 'fail to post ' + action + ' ' + xhr.status; } var err = new Error(msg); err.method = 'post'; err.url = action; err.status = xhr.status; return err; } function ajax(options) { if (typeof XMLHttpRequest === 'undefined') { return; } var xhr = new XMLHttpRequest(); // 上传地址 var action = options.action; if (xhr.upload) { // 上传进度 xhr.upload.onprogress = function progress(e) { if (e.total > 0) { e.percent = parseInt(e.loaded / e.total * 100); } options.onProgress(e); }; } var formData = new FormData(); xhr.onerror = function error(e) { options.onError(e); }; xhr.onload = function onload() { if (xhr.status < 200 || xhr.status >= 300) { return options.onError(getError(action, options, xhr)); } // 返回成功信息 options.onSuccess(getBody(xhr)); }; // 把数据添加到fromData里 if (options.data) { Object.keys(options.data).forEach(function (item) { formData.append(item, options.data[item]); }); } formData.append(options.filename, options.file); // 默认post请求 xhr.open('post', action, true); // 添加headers var headers = options.headers || {}; for (var headItem in headers) { if (headers[headItem]) { xhr.setRequestHeader(headItem, headers[headItem]); } } // 是否携带cookie if (options.withCredentials && 'withCredentials' in xhr) { xhr.withCredentials = true; } xhr.send(formData); return xhr; } // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/Upload/upload.vue?vue&type=script&lang=js& // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // /* harmony default export */ var uploadvue_type_script_lang_js_ = ({ name: 'KdUpload', components: { uploadDrag: upload_drag, uploadList: upload_list }, props: { disabled: Boolean, multiple: Boolean, name: { type: String, default: 'file' }, listType: { type: String, default: '' }, drag: Boolean, tip: { type: String, default: '' }, showFileList: { type: Boolean, default: true }, accept: { type: String, default: '' }, limit: { type: Number }, action: { type: String, default: '' }, withCredentials: Boolean, httpRequest: { type: Function, default: ajax }, headers: { type: Object, default: function _default() { return {}; } }, data: { type: Object, default: function _default() { return {}; } }, initFileList: { type: Array, default: function _default() { return []; } }, autoUpload: { type: Boolean, default: true }, fileChange: { type: Function, default: function _default() { return {}; } }, beforeUpload: { type: Function, default: function _default() { return {}; } }, onChange: { type: Function, default: function _default() { return {}; } }, onRemove: { type: Function, default: function _default() { return {}; } }, onProgress: { type: Function, default: function _default() { return {}; } }, onSuccess: { type: Function, default: function _default() { return {}; } }, onError: { type: Function, default: function _default() { return {}; } }, onSuspend: { type: Function, default: function _default() { return {}; } }, chunk: { type: Boolean, default: false }, chunkSize: { type: Number, default: 0 }, onExceed: { type: Function } }, data: function data() { return { files: [], reqs: {}, fileIndex: 1, fileList: [], uploadStop: false }; }, watch: { initFileList: { immediate: true, handler: function handler(fileList) { var _this = this; this.fileList = fileList.map(function (file) { file.uid = file.uid || Date.now() + _this.fileIndex++; file.status = file.status || 'success'; return file; }); } } }, methods: { handleClick: function handleClick() { if (!this.disabled) { this.$refs.uploadInput.value = null; this.$refs.uploadInput.click(); } }, // @change handleChange: function handleChange(e) { var files = e.target.files; this.updateFile(files); }, // 提交数据 submit: function submit() { var _this2 = this; this.fileList.forEach(function (file) { if (file.status === 'ready') { _this2.upload(file); } }); }, // 上传的文件进行加工 updateFile: function updateFile(v) { var _this3 = this; var fileList = Array.from(v); fileList.forEach(function (file, index) { // 加工file文件 _this3.proccess(file, index); }); }, // 加工文件 proccess: function proccess(file, index) { var proccessFile = { name: file.name, size: file.size, type: file.type, raw: file, uid: Date.now() + this.fileIndex++, status: 'ready' }; if (file.type.indexOf('image') !== -1) { proccessFile.url = URL.createObjectURL(file); } this.fileList.push(proccessFile); // 超出个数删除 if (this.limitFile()) { this.onExceed && this.onExceed(proccessFile, this.fileList); this.handleRemove(proccessFile); return; } // 没有file改变回调,自动上传 if (!this.fileChange && this.autoUpload) { this.upload(proccessFile); return; } // 回调为false,没有通过限制。删除文件 if (this.fileChange(file, this.fileList)) { if (this.autoUpload) { this.upload(proccessFile); } } else { this.handleRemove(proccessFile); } }, limitFile: function limitFile(proccessFile) { var limit = this.limit; return limit ? this.fileList.length > limit : false; }, upload: function upload(proccessFile) { // 上传之前的回调 if (!this.beforeUpload) { return this.sliceChunk(proccessFile); } if (this.beforeUpload(proccessFile)) { // 状态改变 this.sliceChunk(proccessFile); } else { // 删除 this.handleRemove(proccessFile); } }, sliceChunk: function sliceChunk(file) { // 是否分块上传 if (this.chunk) { var chunkSize = this.chunkSize; var sliceTotal = Math.ceil(file.size / chunkSize); file.chunkTotal = sliceTotal; file.currentChunk = 0; this.chunks(file); } else { this.http(file); } }, chunks: function chunks(file) { // 块级上传文件的加工。添加当前次数,截取文件 var chunkSize = this.chunkSize; var sliceFile = file.raw.slice(file.currentChunk * chunkSize, file.currentChunk * chunkSize + chunkSize); file.currentChunk += 1; file.sliceFile = sliceFile; this.http(file); }, http: function http(file) { var _this4 = this; // 调用ajax上传。如果是块级,在data添加分块数据 var that = this; var uid = file.raw.uid; var data = this.data; var rawFile = file.raw; if (this.chunk) { data.currentChunk = file.currentChunk; data.chunkTotal = file.chunkTotal; rawFile = file.sliceFile; } var options = { headers: this.headers, withCredentials: this.withCredentials, file: rawFile, data: data, filename: this.name || file.name, action: this.action, onProgress: function onProgress(e) { that.handleProgress(e, file); }, onSuccess: function onSuccess(res) { that.handleSuccess(res, file); delete _this4.reqs[uid]; }, onError: function onError(err) { that.handleError(err, file); delete _this4.reqs[uid]; } }; var request = this.httpRequest(options); this.reqs[uid] = request; if (request && request.then) { request.then(options.onSuccess, options.onError); } }, // 取消上传 abort: function abort(file) { var reqs = this.reqs; if (file) { var uid = file.uid; if (reqs[uid]) { reqs[uid].abort(); } } }, // 进度条 handleProgress: function handleProgress(e, file) { var index = this.getFile(file); file.status = 'uploading'; // 分块返回的要每次计算 if (this.chunk) { var progress = file.progress || 0; if (file.currentChunk * this.chunkSize > file.size) { progress = 100; } else { progress = parseInt(file.currentChunk * this.chunkSize / file.size * 100); } file.progress = progress; } else { file.progress = e.percent; } this.$set(this.fileList, index, file); this.onProgress(e, file, this.fileList); this.onChange(file, this.fileList); }, handleSuccess: function handleSuccess(e, file) { this.onSuccess(e, file, this.fileList); this.onChange(file, this.fileList); if (file.uploadStop) return; if (this.chunk) { if (file.currentChunk * this.chunkSize < file.size) { this.chunks(file); file.status = 'chunkUploading'; } else { file.status = 'success'; } } else { file.status = 'success'; } }, handleError: function handleError(e, file) { var fileList = this.fileList; file.status = 'error'; fileList.splice(fileList.indexOf(file), 1); this.onError(e, file, fileList); this.onChange(file, fileList); }, // 获取当前文件的位置 getFile: function getFile(file) { return this.fileList.findIndex(function (item) { return item.uid === file.uid; }); }, // 上传失败后,手动恢复上传 uploadSwitch: function uploadSwitch(file) { file.uploadStop = !file.uploadStop; if (!file.uploadStop) { this.chunks(file); } else { this.onSuspend(file, this.fileList); } }, // 删除文件 handleRemove: function handleRemove(file) { var index = this.fileList.findIndex(function (f) { return f.uid === file.uid; }); // 取消上传 this.abort(file); this.fileList.splice(index, 1); if (this.onRemove) { this.onRemove(file, this.fileList); } } } }); // CONCATENATED MODULE: ./components/Upload/upload.vue?vue&type=script&lang=js& /* harmony default export */ var Upload_uploadvue_type_script_lang_js_ = (uploadvue_type_script_lang_js_); // CONCATENATED MODULE: ./components/Upload/upload.vue /* normalize component */ var upload_component = Object(componentNormalizer["a" /* default */])( Upload_uploadvue_type_script_lang_js_, render, staticRenderFns, false, null, null, null ) /* harmony default export */ var upload = (upload_component.exports); // CONCATENATED MODULE: ./components/Upload/index.js upload.install = function (Vue) { Vue.component(upload.name, upload); }; /* harmony default export */ var Upload = __webpack_exports__["default"] = (upload); /***/ }) /******/ })["default"];