images-viewer-vue3
Version:
A lightweight image viewer for Vue3
152 lines (151 loc) • 5.46 kB
JavaScript
var m = Object.defineProperty;
var g = (c, t, e) => t in c ? m(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
var r = (c, t, e) => g(c, typeof t != "symbol" ? t + "" : t, e);
const l = class l {
constructor() {
r(this, "currentImage", null);
r(this, "totalRotate", 0);
r(this, "isMouseDown", !1);
r(this, "config", {
scaleRatio: 1,
rotateRatio: 90,
isEnableDrag: !0,
isEnableWheel: !0,
zIndex: 2e3,
language: "zh",
playSpeed: 2e3,
isDownLoad: !0
});
r(this, "transforms", {
scale: 1,
rotate: "0deg",
scaleY: "",
scaleX: ""
});
}
static getInStance() {
return !this.viewer && (this.viewer = new l()), this.viewer.initialize(), this.viewer;
}
initialize() {
}
setImageTransform() {
if (!this.currentImage) return;
let t = "";
Object.keys(this.transforms).forEach((e) => {
const s = e;
switch (s) {
case "scaleX":
case "scaleY":
case "scale":
case "rotate":
this.transforms[s] && (t += `${e}(${this.transforms[s]}) `);
break;
}
}), this.currentImage.style.transform = t;
}
onWheel(t) {
t.deltaY < 0 && this.zoomIn(), t.deltaY >= 0 && this.zoomOut();
}
setConfigOptions(t) {
this.config = Object.assign(this.config, t);
}
getConfigOptions() {
return this.config;
}
horizontalInvert() {
this.setInvert("scaleY");
}
verticalInvert() {
this.setInvert("scaleX");
}
setInvert(t = "scaleX") {
if (!t || !this.currentImage) return;
let e = this.currentImage.style.transform;
const s = new RegExp(`${t}\\(([^)]+)\\)`);
if (s.test(e)) {
const n = e.match(s), o = (n && parseInt(n[1])) === 1 ? -1 : 1;
t === "scaleX" && (this.transforms.scaleX = `${o}`), t === "scaleY" && (this.transforms.scaleY = `${o}`);
} else
t === "scaleX" && (this.transforms.scaleX = "-1"), t === "scaleY" && (this.transforms.scaleY = "-1");
this.setImageTransform();
}
zoomIn() {
this.setZoom("+");
}
zoomOut() {
this.setZoom("-");
}
rotate(t = "+") {
this.currentImage && (t === "+" ? this.totalRotate += this.config.rotateRatio : this.totalRotate -= this.config.rotateRatio, this.transforms.rotate = `${this.totalRotate}deg`, this.setImageTransform());
}
setZoom(t = "+") {
this.currentImage && (t === "+" ? this.config.scaleRatio += 0.1 : this.config.scaleRatio >= 0.3 && (this.config.scaleRatio -= 0.1), this.transforms.scale = this.config.scaleRatio, this.setImageTransform());
}
setImage(t) {
this.currentImage = t, this.currentImage && this.config.isEnableDrag && (this.currentImage.onmousedown = this.onMouseMove.bind(this));
}
onMouseMove(t) {
if (!this.currentImage) return;
const e = this;
this.isMouseDown = !0, this.currentImage.style.position = "absolute";
const s = t.clientX - this.currentImage.offsetLeft, n = t.clientY - this.currentImage.offsetTop;
return document.onmousemove = function(i) {
if (i = i || window.event, e.isMouseDown) {
let o = i.clientX - s, a = i.clientY - n;
e.currentImage && (e.currentImage.style.left = `${o}px`), e.currentImage && (e.currentImage.style.top = `${a}px`);
}
}, document.onmouseup = function() {
e.isMouseDown = !1, document.onmousemove = null, document.onmouseup = null;
}, !1;
}
onTouchstart(t) {
if (!this.currentImage) return;
const e = this;
this.isMouseDown = !0;
const s = t.touches[0];
this.currentImage.style.position = "absolute";
const n = s.clientX - this.currentImage.offsetLeft, i = s.clientY - this.currentImage.offsetTop;
t.touches.length === 2 && (this.config.scaleRatio = this.getDistance(t.touches[0], t.touches[1])), document.ontouchmove = function(o) {
if (e.isMouseDown) {
const a = o.touches[0];
let u = a.clientX - n, h = a.clientY - i;
e.currentImage && (e.currentImage.style.left = `${u}px`), e.currentImage && (e.currentImage.style.top = `${h}px`);
}
if (o.touches.length === 2 && e.config.scaleRatio) {
const a = e.getDistance(o.touches[0], o.touches[1]), u = a / e.config.scaleRatio;
a > e.config.scaleRatio, e.setMobileZoom(u), o.preventDefault();
}
}, document.ontouchend = function() {
e.isMouseDown = !1;
}, document.ontouchcancel = function() {
e.isMouseDown = !1;
};
}
setMobileZoom(t = 0) {
if (!this.currentImage) return;
let e = this.currentImage.style.transform;
const s = new RegExp("scale\\(([^)]+)\\)", "i");
s.test(e) ? e = e.replace(s, `scale(${t})`) : e += ` scale(${t})`, this.currentImage.style.transform = e;
}
// 计算两个触摸点之间的距离
getDistance(t, e) {
const s = e.clientX - t.clientX, n = e.clientY - t.clientY;
return Math.sqrt(s * s + n * n);
}
static addTotal() {
this.total += 3;
}
removeStyleProperty() {
this.currentImage && (this.currentImage.style.removeProperty("top"), this.currentImage.style.removeProperty("left"), this.currentImage.style.removeProperty("position"), this.currentImage.style.removeProperty("transform"));
}
destroyed() {
this.removeStyleProperty(), this.currentImage = null;
}
};
// 配置全局变量供外部调用
r(l, "viewer"), // 配置静态属性，防止被外部修改
r(l, "total", 0);
let f = l;
export {
f as default
};