380 lines
17 KiB
JavaScript
380 lines
17 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunk-2d0d30b4"], { "5aa3": function(e, t, n) {
|
|
"use strict";
|
|
var i = function() {
|
|
var e2 = this, t2 = e2.$createElement, n2 = e2._self._c || t2;
|
|
return n2("transition", { attrs: { name: "viewer-fade" } }, [n2("div", { ref: "el-image-viewer__wrapper", staticClass: "el-image-viewer__wrapper", style: { "z-index": e2.viewerZIndex }, attrs: { tabindex: "-1" } }, [n2("div", { staticClass: "el-image-viewer__mask", on: { click: function(t3) {
|
|
return t3.target !== t3.currentTarget ? null : e2.handleMaskClick(t3);
|
|
} } }), e2._v(" "), n2("span", { staticClass: "el-image-viewer__btn el-image-viewer__close", on: { click: e2.hide } }, [n2("i", { staticClass: "el-icon-close" })]), e2._v(" "), e2.isSingle ? e2._e() : [n2("span", { staticClass: "el-image-viewer__btn el-image-viewer__prev", class: { "is-disabled": !e2.infinite && e2.isFirst }, on: { click: e2.prev } }, [n2("i", { staticClass: "el-icon-arrow-left" })]), e2._v(" "), n2("span", { staticClass: "el-image-viewer__btn el-image-viewer__next", class: { "is-disabled": !e2.infinite && e2.isLast }, on: { click: e2.next } }, [n2("i", { staticClass: "el-icon-arrow-right" })])], e2._v(" "), n2("div", { staticClass: "el-image-viewer__btn el-image-viewer__actions" }, [n2("div", { staticClass: "el-image-viewer__actions__inner" }, [n2("i", { staticClass: "el-icon-zoom-out", on: { click: function(t3) {
|
|
return e2.handleActions("zoomOut");
|
|
} } }), e2._v(" "), n2("i", { staticClass: "el-icon-zoom-in", on: { click: function(t3) {
|
|
return e2.handleActions("zoomIn");
|
|
} } }), e2._v(" "), n2("i", { staticClass: "el-image-viewer__actions__divider" }), e2._v(" "), n2("i", { class: e2.mode.icon, on: { click: e2.toggleMode } }), e2._v(" "), n2("i", { staticClass: "el-image-viewer__actions__divider" }), e2._v(" "), n2("i", { staticClass: "el-icon-refresh-left", on: { click: function(t3) {
|
|
return e2.handleActions("anticlocelise");
|
|
} } }), e2._v(" "), n2("i", { staticClass: "el-icon-refresh-right", on: { click: function(t3) {
|
|
return e2.handleActions("clocelise");
|
|
} } })])]), e2._v(" "), n2("div", { staticClass: "el-image-viewer__canvas" }, e2._l(e2.urlList, (function(t3, i2) {
|
|
return i2 === e2.index ? n2("img", { key: t3, ref: "img", refInFor: true, staticClass: "el-image-viewer__img", style: e2.imgStyle, attrs: { src: e2.currentImg, referrerpolicy: "no-referrer" }, on: { load: e2.handleImgLoad, error: e2.handleImgError, mousedown: e2.handleMouseDown } }) : e2._e();
|
|
})), 0)], 2)]);
|
|
}, o = [], r = n("6e6d");
|
|
const a = r["default"].prototype.$isServer, s = /([\:\-\_]+(.))/g, l = /^moz([A-Z])/, c = a ? 0 : Number(document.documentMode), d = function(e2) {
|
|
return (e2 || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "");
|
|
}, u = function(e2) {
|
|
return e2.replace(s, (function(e3, t2, n2, i2) {
|
|
return i2 ? n2.toUpperCase() : n2;
|
|
})).replace(l, "Moz$1");
|
|
}, f = (function() {
|
|
return !a && document.addEventListener ? function(e2, t2, n2) {
|
|
e2 && t2 && n2 && e2.addEventListener(t2, n2, false);
|
|
} : function(e2, t2, n2) {
|
|
e2 && t2 && n2 && e2.attachEvent("on" + t2, n2);
|
|
};
|
|
})(), m = (function() {
|
|
return !a && document.removeEventListener ? function(e2, t2, n2) {
|
|
e2 && t2 && e2.removeEventListener(t2, n2, false);
|
|
} : function(e2, t2, n2) {
|
|
e2 && t2 && e2.detachEvent("on" + t2, n2);
|
|
};
|
|
})();
|
|
function h(e2, t2) {
|
|
if (!e2 || !t2) return false;
|
|
if (-1 !== t2.indexOf(" ")) throw new Error("className should not contain space.");
|
|
return e2.classList ? e2.classList.contains(t2) : (" " + e2.className + " ").indexOf(" " + t2 + " ") > -1;
|
|
}
|
|
function p(e2, t2) {
|
|
if (e2) {
|
|
for (var n2 = e2.className, i2 = (t2 || "").split(" "), o2 = 0, r2 = i2.length; o2 < r2; o2++) {
|
|
var a2 = i2[o2];
|
|
a2 && (e2.classList ? e2.classList.add(a2) : h(e2, a2) || (n2 += " " + a2));
|
|
}
|
|
e2.classList || e2.setAttribute("class", n2);
|
|
}
|
|
}
|
|
function v(e2, t2) {
|
|
if (e2 && t2) {
|
|
for (var n2 = t2.split(" "), i2 = " " + e2.className + " ", o2 = 0, r2 = n2.length; o2 < r2; o2++) {
|
|
var a2 = n2[o2];
|
|
a2 && (e2.classList ? e2.classList.remove(a2) : h(e2, a2) && (i2 = i2.replace(" " + a2 + " ", " ")));
|
|
}
|
|
e2.classList || e2.setAttribute("class", d(i2));
|
|
}
|
|
}
|
|
const g = c < 9 ? function(e2, t2) {
|
|
if (!a) {
|
|
if (!e2 || !t2) return null;
|
|
t2 = u(t2), "float" === t2 && (t2 = "styleFloat");
|
|
try {
|
|
switch (t2) {
|
|
case "opacity":
|
|
try {
|
|
return e2.filters.item("alpha").opacity / 100;
|
|
} catch (n2) {
|
|
return 1;
|
|
}
|
|
default:
|
|
return e2.style[t2] || e2.currentStyle ? e2.currentStyle[t2] : null;
|
|
}
|
|
} catch (n2) {
|
|
return e2.style[t2];
|
|
}
|
|
}
|
|
} : function(e2, t2) {
|
|
if (!a) {
|
|
if (!e2 || !t2) return null;
|
|
t2 = u(t2), "float" === t2 && (t2 = "cssFloat");
|
|
try {
|
|
var n2 = document.defaultView.getComputedStyle(e2, "");
|
|
return e2.style[t2] || n2 ? n2[t2] : null;
|
|
} catch (i2) {
|
|
return e2.style[t2];
|
|
}
|
|
}
|
|
};
|
|
let y = (e2) => {
|
|
var t2 = {};
|
|
return e2 && "[object Function]" === t2.toString.call(e2);
|
|
};
|
|
"object" === typeof Int8Array || !r["default"].prototype.$isServer && "function" === typeof document.childNodes || (y = function(e2) {
|
|
return "function" === typeof e2 || false;
|
|
});
|
|
Object.prototype.hasOwnProperty;
|
|
const b = function() {
|
|
return !r["default"].prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i);
|
|
};
|
|
function w(e2) {
|
|
let t2 = false;
|
|
return function(...n2) {
|
|
t2 || (t2 = true, window.requestAnimationFrame((i2) => {
|
|
e2.apply(this, n2), t2 = false;
|
|
}));
|
|
};
|
|
}
|
|
var _ = function(e2) {
|
|
for (let t2 = 1, n2 = arguments.length; t2 < n2; t2++) {
|
|
let n3 = arguments[t2] || {};
|
|
for (let t3 in n3) if (n3.hasOwnProperty(t3)) {
|
|
let i2 = n3[t3];
|
|
void 0 !== i2 && (e2[t3] = i2);
|
|
}
|
|
}
|
|
return e2;
|
|
};
|
|
let k, x = false, C = false;
|
|
const O = function() {
|
|
if (r["default"].prototype.$isServer) return;
|
|
let e2 = I.modalDom;
|
|
return e2 ? x = true : (x = false, e2 = document.createElement("div"), I.modalDom = e2, e2.addEventListener("touchmove", (function(e3) {
|
|
e3.preventDefault(), e3.stopPropagation();
|
|
})), e2.addEventListener("click", (function() {
|
|
I.doOnModalClick && I.doOnModalClick();
|
|
}))), e2;
|
|
}, S = {}, I = { modalFade: true, getInstance: function(e2) {
|
|
return S[e2];
|
|
}, register: function(e2, t2) {
|
|
e2 && t2 && (S[e2] = t2);
|
|
}, deregister: function(e2) {
|
|
e2 && (S[e2] = null, delete S[e2]);
|
|
}, nextZIndex: function() {
|
|
return I.zIndex++;
|
|
}, modalStack: [], doOnModalClick: function() {
|
|
const e2 = I.modalStack[I.modalStack.length - 1];
|
|
if (!e2) return;
|
|
const t2 = I.getInstance(e2.id);
|
|
t2 && t2.closeOnClickModal && t2.close();
|
|
}, openModal: function(e2, t2, n2, i2, o2) {
|
|
if (r["default"].prototype.$isServer) return;
|
|
if (!e2 || void 0 === t2) return;
|
|
this.modalFade = o2;
|
|
const a2 = this.modalStack;
|
|
for (let r2 = 0, l2 = a2.length; r2 < l2; r2++) {
|
|
const t3 = a2[r2];
|
|
if (t3.id === e2) return;
|
|
}
|
|
const s2 = O();
|
|
if (p(s2, "v-modal"), this.modalFade && !x && p(s2, "v-modal-enter"), i2) {
|
|
let e3 = i2.trim().split(/\s+/);
|
|
e3.forEach((e4) => p(s2, e4));
|
|
}
|
|
setTimeout(() => {
|
|
v(s2, "v-modal-enter");
|
|
}, 200), n2 && n2.parentNode && 11 !== n2.parentNode.nodeType ? n2.parentNode.appendChild(s2) : document.body.appendChild(s2), t2 && (s2.style.zIndex = t2), s2.tabIndex = 0, s2.style.display = "", this.modalStack.push({ id: e2, zIndex: t2, modalClass: i2 });
|
|
}, closeModal: function(e2) {
|
|
const t2 = this.modalStack, n2 = O();
|
|
if (t2.length > 0) {
|
|
const i2 = t2[t2.length - 1];
|
|
if (i2.id === e2) {
|
|
if (i2.modalClass) {
|
|
let e3 = i2.modalClass.trim().split(/\s+/);
|
|
e3.forEach((e4) => v(n2, e4));
|
|
}
|
|
t2.pop(), t2.length > 0 && (n2.style.zIndex = t2[t2.length - 1].zIndex);
|
|
} else for (let n3 = t2.length - 1; n3 >= 0; n3--) if (t2[n3].id === e2) {
|
|
t2.splice(n3, 1);
|
|
break;
|
|
}
|
|
}
|
|
0 === t2.length && (this.modalFade && p(n2, "v-modal-leave"), setTimeout(() => {
|
|
0 === t2.length && (n2.parentNode && n2.parentNode.removeChild(n2), n2.style.display = "none", I.modalDom = void 0), v(n2, "v-modal-leave");
|
|
}, 200));
|
|
} };
|
|
Object.defineProperty(I, "zIndex", { configurable: true, get() {
|
|
return C || (k = k || (r["default"].prototype.$ELEMENT || {}).zIndex || 2e3, C = true), k;
|
|
}, set(e2) {
|
|
k = e2;
|
|
} });
|
|
const L = function() {
|
|
if (!r["default"].prototype.$isServer && I.modalStack.length > 0) {
|
|
const e2 = I.modalStack[I.modalStack.length - 1];
|
|
if (!e2) return;
|
|
const t2 = I.getInstance(e2.id);
|
|
return t2;
|
|
}
|
|
};
|
|
r["default"].prototype.$isServer || window.addEventListener("keydown", (function(e2) {
|
|
if (27 === e2.keyCode) {
|
|
const e3 = L();
|
|
e3 && e3.closeOnPressEscape && (e3.handleClose ? e3.handleClose() : e3.handleAction ? e3.handleAction("cancel") : e3.close());
|
|
}
|
|
}));
|
|
var z = I;
|
|
let E;
|
|
var N = function() {
|
|
if (r["default"].prototype.$isServer) return 0;
|
|
if (void 0 !== E) return E;
|
|
const e2 = document.createElement("div");
|
|
e2.className = "el-scrollbar__wrap", e2.style.visibility = "hidden", e2.style.width = "100px", e2.style.position = "absolute", e2.style.top = "-9999px", document.body.appendChild(e2);
|
|
const t2 = e2.offsetWidth;
|
|
e2.style.overflow = "scroll";
|
|
const n2 = document.createElement("div");
|
|
n2.style.width = "100%", e2.appendChild(n2);
|
|
const i2 = n2.offsetWidth;
|
|
return e2.parentNode.removeChild(e2), E = t2 - i2, E;
|
|
};
|
|
let F, A = 1;
|
|
Boolean, Boolean, Boolean, Boolean, Boolean, Boolean, Boolean;
|
|
function j(e2) {
|
|
return j = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
|
|
return typeof e3;
|
|
} : function(e3) {
|
|
return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
|
|
}, j(e2);
|
|
}
|
|
function T(e2, t2) {
|
|
var n2 = Object.keys(e2);
|
|
if (Object.getOwnPropertySymbols) {
|
|
var i2 = Object.getOwnPropertySymbols(e2);
|
|
t2 && (i2 = i2.filter((function(t3) {
|
|
return Object.getOwnPropertyDescriptor(e2, t3).enumerable;
|
|
}))), n2.push.apply(n2, i2);
|
|
}
|
|
return n2;
|
|
}
|
|
function D(e2) {
|
|
for (var t2 = 1; t2 < arguments.length; t2++) {
|
|
var n2 = null != arguments[t2] ? arguments[t2] : {};
|
|
t2 % 2 ? T(Object(n2), true).forEach((function(t3) {
|
|
$(e2, t3, n2[t3]);
|
|
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : T(Object(n2)).forEach((function(t3) {
|
|
Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
|
|
}));
|
|
}
|
|
return e2;
|
|
}
|
|
function $(e2, t2, n2) {
|
|
return (t2 = M(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
|
|
}
|
|
function M(e2) {
|
|
var t2 = P(e2, "string");
|
|
return "symbol" == j(t2) ? t2 : t2 + "";
|
|
}
|
|
function P(e2, t2) {
|
|
if ("object" != j(e2) || !e2) return e2;
|
|
var n2 = e2[Symbol.toPrimitive];
|
|
if (void 0 !== n2) {
|
|
var i2 = n2.call(e2, t2 || "default");
|
|
if ("object" != j(i2)) return i2;
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
}
|
|
return ("string" === t2 ? String : Number)(e2);
|
|
}
|
|
var B = { CONTAIN: { name: "contain", icon: "el-icon-full-screen" }, ORIGINAL: { name: "original", icon: "el-icon-c-scale-to-original" } }, H = b() ? "DOMMouseScroll" : "mousewheel", W = { name: "elImageViewer", props: { urlList: { type: Array, default: function() {
|
|
return [];
|
|
} }, zIndex: { type: Number, default: 2e3 }, onSwitch: { type: Function, default: function() {
|
|
} }, onClose: { type: Function, default: function() {
|
|
} }, initialIndex: { type: Number, default: 0 }, appendToBody: { type: Boolean, default: true }, maskClosable: { type: Boolean, default: true } }, data: function() {
|
|
return { index: this.initialIndex, isShow: false, infinite: true, loading: false, mode: B.CONTAIN, transform: { scale: 1, deg: 0, offsetX: 0, offsetY: 0, enableTransition: false } };
|
|
}, computed: { isSingle: function() {
|
|
return this.urlList.length <= 1;
|
|
}, isFirst: function() {
|
|
return 0 === this.index;
|
|
}, isLast: function() {
|
|
return this.index === this.urlList.length - 1;
|
|
}, currentImg: function() {
|
|
return this.urlList[this.index];
|
|
}, imgStyle: function() {
|
|
var e2 = this.transform, t2 = e2.scale, n2 = e2.deg, i2 = e2.offsetX, o2 = e2.offsetY, r2 = e2.enableTransition, a2 = { transform: "scale(".concat(t2, ") rotate(").concat(n2, "deg)"), transition: r2 ? "transform .3s" : "", "margin-left": "".concat(i2, "px"), "margin-top": "".concat(o2, "px") };
|
|
return this.mode === B.CONTAIN && (a2.maxWidth = a2.maxHeight = "100%"), a2;
|
|
}, viewerZIndex: function() {
|
|
var e2 = z.nextZIndex();
|
|
return this.zIndex > e2 ? this.zIndex : e2;
|
|
} }, watch: { index: { handler: function(e2) {
|
|
this.reset(), this.onSwitch(e2);
|
|
} }, currentImg: function(e2) {
|
|
var t2 = this;
|
|
this.$nextTick((function(e3) {
|
|
var n2 = t2.$refs.img[0];
|
|
n2.complete || (t2.loading = true);
|
|
}));
|
|
} }, methods: { hide: function() {
|
|
this.deviceSupportUninstall(), this.onClose();
|
|
}, deviceSupportInstall: function() {
|
|
var e2 = this;
|
|
this._keyDownHandler = function(t2) {
|
|
t2.stopPropagation();
|
|
var n2 = t2.keyCode;
|
|
switch (n2) {
|
|
case 27:
|
|
e2.hide();
|
|
break;
|
|
case 32:
|
|
e2.toggleMode();
|
|
break;
|
|
case 37:
|
|
e2.prev();
|
|
break;
|
|
case 38:
|
|
e2.handleActions("zoomIn");
|
|
break;
|
|
case 39:
|
|
e2.next();
|
|
break;
|
|
case 40:
|
|
e2.handleActions("zoomOut");
|
|
break;
|
|
}
|
|
}, this._mouseWheelHandler = w((function(t2) {
|
|
var n2 = t2.wheelDelta ? t2.wheelDelta : -t2.detail;
|
|
n2 > 0 ? e2.handleActions("zoomIn", { zoomRate: 0.015, enableTransition: false }) : e2.handleActions("zoomOut", { zoomRate: 0.015, enableTransition: false });
|
|
})), f(document, "keydown", this._keyDownHandler), f(document, H, this._mouseWheelHandler);
|
|
}, deviceSupportUninstall: function() {
|
|
m(document, "keydown", this._keyDownHandler), m(document, H, this._mouseWheelHandler), this._keyDownHandler = null, this._mouseWheelHandler = null;
|
|
}, handleImgLoad: function(e2) {
|
|
this.loading = false;
|
|
}, handleImgError: function(e2) {
|
|
this.loading = false, e2.target.alt = "加载失败";
|
|
}, handleMouseDown: function(e2) {
|
|
var t2 = this;
|
|
if (!this.loading && 0 === e2.button) {
|
|
var n2 = this.transform, i2 = n2.offsetX, o2 = n2.offsetY, r2 = e2.pageX, a2 = e2.pageY;
|
|
this._dragHandler = w((function(e3) {
|
|
t2.transform.offsetX = i2 + e3.pageX - r2, t2.transform.offsetY = o2 + e3.pageY - a2;
|
|
})), f(document, "mousemove", this._dragHandler), f(document, "mouseup", (function(e3) {
|
|
m(document, "mousemove", t2._dragHandler);
|
|
})), e2.preventDefault();
|
|
}
|
|
}, handleMaskClick: function() {
|
|
this.maskClosable && this.hide();
|
|
}, reset: function() {
|
|
this.transform = { scale: 1, deg: 0, offsetX: 0, offsetY: 0, enableTransition: false };
|
|
}, toggleMode: function() {
|
|
if (!this.loading) {
|
|
var e2 = Object.keys(B), t2 = Object.values(B), n2 = t2.indexOf(this.mode), i2 = (n2 + 1) % e2.length;
|
|
this.mode = B[e2[i2]], this.reset();
|
|
}
|
|
}, prev: function() {
|
|
if (!this.isFirst || this.infinite) {
|
|
var e2 = this.urlList.length;
|
|
this.index = (this.index - 1 + e2) % e2;
|
|
}
|
|
}, next: function() {
|
|
if (!this.isLast || this.infinite) {
|
|
var e2 = this.urlList.length;
|
|
this.index = (this.index + 1) % e2;
|
|
}
|
|
}, handleActions: function(e2) {
|
|
var t2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
|
|
if (!this.loading) {
|
|
var n2 = D({ zoomRate: 0.2, rotateDeg: 90, enableTransition: true }, t2), i2 = n2.zoomRate, o2 = n2.rotateDeg, r2 = n2.enableTransition, a2 = this.transform;
|
|
switch (e2) {
|
|
case "zoomOut":
|
|
a2.scale > 0.2 && (a2.scale = parseFloat((a2.scale - i2).toFixed(3)));
|
|
break;
|
|
case "zoomIn":
|
|
a2.scale = parseFloat((a2.scale + i2).toFixed(3));
|
|
break;
|
|
case "clocelise":
|
|
a2.deg += o2;
|
|
break;
|
|
case "anticlocelise":
|
|
a2.deg -= o2;
|
|
break;
|
|
}
|
|
a2.enableTransition = r2;
|
|
}
|
|
} }, mounted: function() {
|
|
this.deviceSupportInstall(), this.appendToBody && document.body.appendChild(this.$el), this.$refs["el-image-viewer__wrapper"].focus();
|
|
}, destroyed: function() {
|
|
this.appendToBody && this.$el && this.$el.parentNode && this.$el.parentNode.removeChild(this.$el);
|
|
} }, X = W, Y = n("829d"), R = Object(Y["a"])(X, i, o, false, null, null, null);
|
|
t["a"] = R.exports;
|
|
} }]);
|