@varonervar/components
Version:
> 基于[Element-UI](https://element.eleme.cn/#/zh-CN/component/quickstart) 封装常用组件，部分组件参考[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
819 lines (693 loc) • 23.8 kB
JavaScript
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 = 29);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
/* 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
}
}
/***/ }),
/* 1 */,
/* 2 */,
/* 3 */
/***/ (function(module, exports) {
module.exports = require("core-js/modules/es.array.includes.js");
/***/ }),
/* 4 */,
/* 5 */,
/* 6 */,
/* 7 */,
/* 8 */,
/* 9 */,
/* 10 */,
/* 11 */
/***/ (function(module, exports) {
module.exports = require("core-js/modules/es.error.cause.js");
/***/ }),
/* 12 */
/***/ (function(module, exports) {
module.exports = require("element-ui");
/***/ }),
/* 13 */,
/* 14 */,
/* 15 */,
/* 16 */,
/* 17 */,
/* 18 */,
/* 19 */,
/* 20 */,
/* 21 */
/***/ (function(module, exports) {
module.exports = require("core-js/modules/web.dom-exception.stack.js");
/***/ }),
/* 22 */
/***/ (function(module, exports) {
module.exports = require("core-js/modules/es.typed-array.at.js");
/***/ }),
/* 23 */
/***/ (function(module, exports) {
module.exports = require("core-js/modules/es.typed-array.set.js");
/***/ }),
/* 24 */
/***/ (function(module, exports) {
module.exports = require("core-js/modules/esnext.typed-array.find-last.js");
/***/ }),
/* 25 */
/***/ (function(module, exports) {
module.exports = require("core-js/modules/esnext.typed-array.find-last-index.js");
/***/ }),
/* 26 */,
/* 27 */,
/* 28 */,
/* 29 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
// 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!./packages/z-upload/body/ZUpload.vue?vue&type=template&id=7bafd1a4&
var render = function () {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"el-upload",
_vm._g(
_vm._b(
{
key: _vm._uid,
ref: "upload",
staticClass: "inline-block",
attrs: {
action: "",
drag: _vm.drag,
"file-list": _vm.fileList,
"on-change": _vm.fileChange,
"http-request": _vm.httpRequestBox,
"on-exceed": _vm.exceedHandler,
},
scopedSlots: _vm._u(
[
{
key: "trigger",
fn: function () {
return [_vm._t("trigger")]
},
proxy: true,
},
],
null,
true
),
},
"el-upload",
_vm.$attrs,
false
),
_vm.$listeners
),
[
_vm._t("default", function () {
return [
_vm.drag
? [
_c("i", { staticClass: "el-icon-upload" }),
_c("div", { staticClass: "el-upload__text" }, [
_c("em", [_vm._v("点击上传文件")]),
]),
_c(
"div",
{
staticClass: "el-upload__tip",
attrs: { slot: "tip" },
slot: "tip",
},
[_vm._v("上传文件大小不超过" + _vm._s(_vm.limitSizeStr))]
),
]
: _c("el-button", { attrs: { type: "primary" } }, [
_vm._v("文件上传"),
]),
]
}),
],
2
)
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./packages/z-upload/body/ZUpload.vue?vue&type=template&id=7bafd1a4&
// EXTERNAL MODULE: external "core-js/modules/web.dom-exception.stack.js"
var web_dom_exception_stack_js_ = __webpack_require__(21);
// EXTERNAL MODULE: external "core-js/modules/es.typed-array.at.js"
var es_typed_array_at_js_ = __webpack_require__(22);
// EXTERNAL MODULE: external "core-js/modules/es.typed-array.set.js"
var es_typed_array_set_js_ = __webpack_require__(23);
// EXTERNAL MODULE: external "core-js/modules/esnext.typed-array.find-last.js"
var esnext_typed_array_find_last_js_ = __webpack_require__(24);
// EXTERNAL MODULE: external "core-js/modules/esnext.typed-array.find-last-index.js"
var esnext_typed_array_find_last_index_js_ = __webpack_require__(25);
// EXTERNAL MODULE: external "core-js/modules/es.error.cause.js"
var es_error_cause_js_ = __webpack_require__(11);
// EXTERNAL MODULE: external "core-js/modules/es.array.includes.js"
var es_array_includes_js_ = __webpack_require__(3);
// EXTERNAL MODULE: external "element-ui"
var external_element_ui_ = __webpack_require__(12);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./packages/z-upload/body/ZUpload.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ var ZUploadvue_type_script_lang_js_ = ({
name: 'ZUpload',
inheritAttrs: false,
props: {
value: {
type: Array,
default() {
return [];
}
},
// 上传函数
uploadHandler: {
type: Function,
required: true
},
// 图片压缩质量
quality: {
type: Number,
validator(v) {
// 质量默认是0.92, 不传就不压缩，传了就会调用压缩函数
return v > 0 || v < 1;
}
},
// 是否支持拖拽
drag: {
type: Boolean,
default: false
},
// 限制大小，单位KB
limitSize: {
type: Number,
default: 1024 * 30
},
onChange: Function,
onExceed: Function,
// 分辨率限制数值，> < >= <= =
limitImgWidthHeight: {
type: Object,
default() {
return {
width: 400,
height: 400,
type: '<='
};
}
},
// 是否限制分辨率
isLimitImgWidthHeight: {
type: Boolean,
default: false
}
},
data() {
return {
destryArr: [],
// 创建图片后需要销毁
fileList: []
};
},
methods: {
fileChange(file, fileList) {
console.log('选取文件', file, fileList);
this.fileList = fileList;
this.$emit('input', fileList);
typeof this.onChange === 'function' && this.onChange(file, fileList);
},
// 压缩图片用
makeCanvas(img, width, height) {
let quality = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.92;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height; // 铺底色 PNG转JPEG时透明区域会变黑色
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, width, height);
ctx.drawImage(img, 0, 0, width, height);
const base64 = canvas.toDataURL('image/jpeg', quality);
return base64;
},
// 压缩图片用
dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
let byteString;
/* istanbul ignore else */
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(dataURI.split(',')[1]);
} else {
byteString = decodeURIComponent(dataURI.split(',')[1]);
} // separate out the mime component
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array
const ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i += 1) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia.buffer], {
type: mimeString
});
},
// 获取图片信息，执行压缩
createImageInfo(imgUrl) {
let fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Function.prototype;
return new Promise((resolve, reject) => {
const oImg = new Image();
oImg.onload = () => {
const offsetWidth = oImg.width;
const offsetHeight = oImg.height;
let newDataUrl = null;
let newBlob = null;
if (this.quality) {
newDataUrl = this.makeCanvas(oImg, oImg.width, oImg.height, this.quality);
newBlob = this.dataURItoBlob(newDataUrl);
}
fn(offsetWidth, offsetHeight, newDataUrl, newBlob);
resolve({
width: offsetWidth,
height: offsetHeight,
dataUrl: newDataUrl,
blob: newBlob
});
};
oImg.onerror = () => {
reject(new Error('image load error'));
};
oImg.src = imgUrl; // src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错
});
},
// 通知报错
notifyMes(message) {
Object(external_element_ui_["Notification"])({
title: '错误',
message,
type: 'error'
});
},
// 判断分辨率是否符合条件
judgeLimitSizeFn(offsetWidth, offsetHeight) {
const {
width: wo,
height: ho,
type
} = this.limitImgWidthHeight;
const width = +wo;
const height = +ho;
if (width > 0 && height > 0) {
const strs = "\u5F53\u524D\u5BBD\u9AD8".concat(offsetWidth, " * ").concat(offsetHeight, "\u3002");
const obj = {
'=': [offsetWidth === width && offsetHeight === height, "\u53EA\u80FD\u4E0A\u4F20\u5BBD".concat(width, "\u9AD8").concat(height, "\u50CF\u7D20\u7684\u56FE\u7247\uFF0C").concat(strs)],
'>': [offsetWidth > width && offsetHeight > height, "\u8BF7\u4E0A\u4F20\u5BBD\u5927\u4E8E".concat(width, "\u9AD8\u5927\u4E8E").concat(height, "\u50CF\u7D20\u7684\u56FE\u7247\uFF0C").concat(strs)],
'<': [offsetWidth < width && offsetHeight < height, "\u8BF7\u4E0A\u4F20\u5BBD\u5C0F\u4E8E".concat(width, "\u9AD8\u5C0F\u4E8E").concat(height, "\u50CF\u7D20\u7684\u56FE\u7247\uFF0C").concat(strs)],
'>=': [offsetWidth >= width && offsetHeight >= height, "\u8BF7\u4E0A\u4F20\u5BBD\u5927\u4E8E\u7B49\u4E8E".concat(width, "\u9AD8\u5927\u4E8E\u7B49\u4E8E").concat(height, "\u50CF\u7D20\u7684\u56FE\u7247\uFF0C").concat(strs)],
'<=': [offsetWidth <= width && offsetHeight <= height, "\u8BF7\u4E0A\u4F20\u5BBD\u5C0F\u4E8E\u7B49\u4E8E".concat(width, "\u9AD8\u5C0F\u4E8E\u7B49\u4E8E").concat(height, "\u50CF\u7D20\u7684\u56FE\u7247\uFF0C").concat(strs)]
};
const [result, msg] = obj[type];
console.log('分辨率结果', result);
if (!result) {
this.notifyMes("\u4E0A\u4F20\u6587\u4EF6\u5206\u8FA8\u7387\u4E0D\u5BF9\uFF0C".concat(msg));
return false;
}
return result;
}
if (width > 0 || height > 0) {
// 限制了宽度或者高度
let str = '宽度';
let com = offsetWidth;
let val = width;
if (height > 0) {
str = '高度';
com = offsetHeight;
val = height;
}
const obj = {
'=': [com === val, "\u53EA\u80FD\u4E0A\u4F20".concat(str, "\u4E3A").concat(val, "\u5206\u8FA8\u7387\u7684\u56FE\u7247\uFF0C\u5F53\u524D\u4E3A").concat(com, "\u3002")],
'>': [com > val, "\u8BF7\u4E0A\u4F20".concat(str, "\u4E3A").concat(val, "\u50CF\u7D20\u4EE5\u4E0A\u7684\u56FE\u7247\uFF0C\u5F53\u524D\u4E3A").concat(com, "\u3002")],
'<': [com < val, "\u8BF7\u4E0A\u4F20".concat(str, "\u4E3A").concat(val, "\u50CF\u7D20\u4EE5\u4E0B\u7684\u56FE\u7247\uFF0C\u5F53\u524D\u4E3A").concat(com, "\u3002")],
'>=': [com >= val, "\u8BF7\u4E0A\u4F20".concat(str, "\u4E3A").concat(val, "\u50CF\u7D20\u53CA\u4EE5\u4E0A\u7684\u56FE\u7247\uFF0C\u5F53\u524D\u4E3A").concat(com, "\u3002")],
'<=': [com <= val, "\u8BF7\u4E0A\u4F20".concat(str, "\u4E3A").concat(val, "\u50CF\u7D20\u53CA\u4EE5\u4EE5\u4E0B\u7684\u56FE\u7247\uFF0C\u5F53\u524D\u4E3A").concat(com, "\u3002")]
};
const [result, STR] = obj[type];
console.log('分辨率结果', result);
if (!result) {
this.notifyMes("\u4E0A\u4F20\u6587\u4EF6\u5206\u8FA8\u7387\u4E0D\u5BF9\uFF0C".concat(STR));
return false;
}
return result;
} // 没有限制 或者 通过了匹配 ，如果限制了高度没限制宽度是匹配不了的，放行了
return true;
},
// 检查图片是否合规
async checkFileProblem(file) {
if (!file.raw) return file; // 可能是已上传的文件
const fileType = file.raw.type;
console.log('文件类型', fileType);
if (fileType && this.$attrs.accept && !this.$attrs.accept.includes(fileType)) {
this.notifyMes("\u4E0A\u4F20\u6587\u4EF6\u683C\u5F0F\u4E0D\u5BF9\uFF0C\u53EA\u80FD\u4E0A\u4F20".concat(this.accept, "\u6587\u4EF6\uFF0C\u76EE\u524D\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B\u4E3A").concat(fileType));
return null;
}
if (file.size / 1024 > this.limitSize) {
// 文件大小限制
this.notifyMes("\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(this.limitSize, "KB\uFF0C\u60A8\u7684\u6587\u4EF6\u5927\u5C0F").concat(Math.ceil(file.size / 1024), "kb!"));
return null;
}
if (fileType.includes('image')) {
const {
raw,
url,
...other
} = file;
const blobUrl = url || this.createObjectURL(raw); // 如果图片有限制分辨率或者需要压缩
if (this.isLimitImgWidthHeight || this.quality) {
try {
const {
width,
height,
blob
} = await this.createImageInfo(blobUrl);
let result = file;
if (this.isLimitImgWidthHeight) {
const trush = this.judgeLimitSizeFn(width, height); // 如果为false，分辨率不过关，返回null
if (!trush) {
return null;
}
} // 如果需要压缩，这返回压缩的图片数据
if (this.quality) {
result = {
raw: blob,
url: blobUrl,
...other
};
}
return result;
} catch (error) {
this.notifyMes('图片异常！');
console.error(error);
throw Error(error);
}
}
}
return file;
},
async httpRequestBox(file) {
const len = this.fileList.length;
if (!len) {
this.clearFiles(); // 清除文件
this.notifyMes('文件个数为0！');
return;
}
const result = await Promise.all(this.fileList.map(f => this.checkFileProblem(f)));
console.log('上传', result); // 如果有false的则校验没通过
if (result.some(v => !v)) {
this.fileList = result.filter(v => v);
return;
}
this.fileList = result.filter(v => v);
this.$emit('input', this.fileList);
typeof this.uploadHandler === 'function' && this.uploadHandler(file, this.fileList);
},
createObjectURL(object) {
const result = window.URL ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
this.destryArr.push(result);
return result;
},
// 销毁图片临时地址
revokeObjectURL(objectURL) {
try {
window.URL ? window.URL.revokeObjectURL(objectURL) : window.webkitURL.revokeObjectURL(objectURL);
} catch (_) {
/**/
}
},
// 清空文件
clearFiles() {
this.fileList = [];
this.$refs.upload.clearFiles();
},
// 取消上传
abort() {
this.$refs.upload.abort();
},
// 手动上传
submit() {
this.$refs.upload.submit();
},
upload() {
return this.$refs.upload;
},
exceedHandler() {
this.notifyMes('上传文件数量超过限制！');
typeof this.onExceed === 'function' && this.onExceed(...arguments);
}
},
beforeDestroy() {
this.destryArr.forEach(url => {
this.revokeObjectURL(url);
});
},
computed: {
limitSizeStr(_ref) {
let {
limitSize
} = _ref;
const mb = limitSize / 1024;
return mb >= 1 ? "".concat(mb.toFixed(2), "M") : "".concat(limitSize, "KB");
}
},
watch: {
value: {
handler(v) {
this.fileList = v || [];
},
immediate: true
}
}
});
// CONCATENATED MODULE: ./packages/z-upload/body/ZUpload.vue?vue&type=script&lang=js&
/* harmony default export */ var body_ZUploadvue_type_script_lang_js_ = (ZUploadvue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(0);
// CONCATENATED MODULE: ./packages/z-upload/body/ZUpload.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
body_ZUploadvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var ZUpload = (component.exports);
// CONCATENATED MODULE: ./packages/z-upload/index.js
/* istanbul ignore next */
ZUpload.install = function install(Vue) {
Vue.component(ZUpload.name, ZUpload);
};
/* harmony default export */ var z_upload = __webpack_exports__["default"] = (ZUpload);
/***/ })
/******/ ]);