cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
305 lines (304 loc) • 12.9 kB
JavaScript
import { defineComponent, ref, watch, onMounted, toRefs, nextTick, openBlock, createBlock, Teleport, createElementBlock, createElementVNode, normalizeStyle, withModifiers, createCommentVNode, pushScopeId, popScopeId } from "vue";
import "./imagePreview.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
name: "ImagePreview",
props: {
modelValue: { type: Boolean },
src: {
type: String
},
preview: {
type: Boolean
},
clockType: String
},
setup(props, { emit }) {
const imgSrc = ref(props.src);
const isMask = ref(false);
const refPreBox = ref();
const refPreImg = ref();
const scaleNum = ref(1);
const rotateNum = ref(0);
const isReset = ref(false);
const X = ref(0);
const Y = ref(0);
const closeSize = ref();
const picturePreview = () => {
if (isMask.value) {
nextTick(() => {
refPreImg.value.src = imgSrc.value;
let curWidthScale = refPreImg.value.offsetWidth / window.innerWidth;
let curHeightScale = refPreImg.value.offsetHeight / window.innerHeight;
if (refPreImg.value.offsetWidth >= refPreImg.value.offsetHeight) {
refPreImg.value.style.width = "100%";
if (curWidthScale < 0.1) {
refPreBox.value.style.width = "24%";
} else if (curWidthScale >= 0.1 && curWidthScale <= 0.2) {
refPreBox.value.style.width = "44%";
} else if (curWidthScale > 0.2 && curWidthScale <= 0.4) {
refPreBox.value.style.width = "40%";
} else if (curWidthScale > 0.4 && curWidthScale <= 0.625)
;
else if (curWidthScale > 0.625 && curWidthScale <= 1) {
refPreBox.value.style.width = "60%";
} else if (curWidthScale > 1 && curWidthScale <= 2) {
refPreBox.value.style.width = "50%";
} else if (curWidthScale > 2) {
refPreBox.value.style.width = "60%";
}
} else {
refPreImg.value.style.height = "100%";
if (curHeightScale >= 1 && curHeightScale < 3) {
refPreBox.value.style.height = "76%";
} else if (curHeightScale >= 3) {
refPreBox.value.style.height = "70%";
}
}
});
}
};
const scaleFn = (type, $event) => {
switch (type) {
case "add":
scaleNum.value *= 1.4;
break;
case "sub":
scaleNum.value /= 1.4;
break;
case "wheel":
scaleNum.value += $event.wheelDelta / 800;
break;
}
if (scaleNum.value >= 7) {
scaleNum.value = 7;
} else if (scaleNum.value <= 0.2) {
scaleNum.value = 0.2;
}
refPreBox.value.style.transform = `scale(${scaleNum.value.toFixed(3)})
translate(${X.value}px, ${Y.value}px)`;
refPreImg.value.style.transform = `rotate(${rotateNum.value}deg)`;
refPreImg.value.style.transition = `transform 0.3s ease 0s`;
};
const rotateFn = (type) => {
if (type === "left") {
rotateNum.value -= 90;
} else if (type === "right") {
rotateNum.value += 90;
}
refPreImg.value.style.transform = `rotate(${rotateNum.value}deg)`;
refPreImg.value.style.transition = `transform 0.3s ease 0s`;
refPreImg.value.addEventListener(
"transitionend",
() => {
if (Math.abs(rotateNum.value % 360) === 0) {
rotateNum.value = 0;
refPreImg.value.style.transform = `rotate(${rotateNum.value}deg)`;
refPreImg.value.style.transition = null;
}
},
false
);
};
const resetFn = () => {
isReset.value = !isReset.value;
scaleNum.value = 1;
rotateNum.value = 0;
X.value = 0;
Y.value = 0;
refPreBox.value.style.transform = `scale(${scaleNum.value}) translate(${X.value}px, ${Y.value}px)`;
refPreImg.value.style.transform = `rotate(${rotateNum.value}deg)`;
refPreImg.value.style.transition = `transform 0.3s ease 0s`;
};
const cloxeFn = () => {
emit("update:modelValue", false);
};
const mouseFn = (event) => {
let initX = event.pageX - X.value * scaleNum.value;
let initY = event.pageY - Y.value * scaleNum.value;
document.onmousemove = (e) => {
e.preventDefault();
X.value = (e.pageX - initX) / scaleNum.value;
Y.value = (e.pageY - initY) / scaleNum.value;
refPreBox.value.style.transition = null;
refPreBox.value.style.transform = `scale(${scaleNum.value}) translate(${X.value}px, ${Y.value}px)`;
};
document.onmouseup = (e) => {
e.preventDefault();
document.onmousemove = null;
document.onmouseup = null;
};
};
watch(
() => props.src,
() => {
imgSrc.value = props.src;
}
);
watch(
() => props.modelValue,
() => {
isMask.value = props.modelValue;
picturePreview();
}
);
onMounted(() => {
switch (props.clockType) {
case "max":
closeSize.value = 128;
break;
case "middle":
closeSize.value = 64;
break;
case "small":
closeSize.value = 32;
break;
}
});
return {
imgSrc,
refPreBox,
refPreImg,
isMask,
isReset,
closeSize,
picturePreview,
scaleFn,
rotateFn,
resetFn,
cloxeFn,
mouseFn,
...toRefs(props)
};
}
});
const _withScopeId = (n) => (pushScopeId("data-v-c82f5d40"), n = n(), popScopeId(), n);
const _hoisted_1 = {
key: 0,
class: "image-std__preview",
style: { "z-index": "2022" }
};
const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
}, null, -1));
const _hoisted_3 = [
_hoisted_2
];
const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 1024 1024" }, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"
})
], -1));
const _hoisted_5 = [
_hoisted_4
];
const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 1024 1024" }, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"
})
], -1));
const _hoisted_7 = [
_hoisted_6
];
const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 1024 1024" }, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z"
})
], -1));
const _hoisted_9 = [
_hoisted_8
];
const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 1024 1024" }, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zM512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412zM512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512z"
})
], -1));
const _hoisted_11 = [
_hoisted_10
];
const _hoisted_12 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 1024 1024" }, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"
})
], -1));
const _hoisted_13 = [
_hoisted_12
];
const _hoisted_14 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 1024 1024" }, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"
})
], -1));
const _hoisted_15 = [
_hoisted_14
];
const _hoisted_16 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(Teleport, { to: "body" }, [
_ctx.isMask ? (openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("span", {
class: "image-std__pre-close",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cloxeFn && _ctx.cloxeFn(...args)),
style: normalizeStyle({ width: _ctx.closeSize + "px", height: _ctx.closeSize + "px" })
}, [
(openBlock(), createElementBlock("svg", {
viewBox: "0 0 1024 1024",
style: normalizeStyle({ width: _ctx.closeSize - 12 + "px" })
}, _hoisted_3, 4))
], 4),
createElementVNode("div", {
class: "image-std__pre-bottom",
onDblclick: _cache[7] || (_cache[7] = withModifiers(() => {
}, ["stop"]))
}, [
createElementVNode("i", {
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.scaleFn("sub", $event))
}, _hoisted_5),
createElementVNode("i", {
onClick: _cache[2] || (_cache[2] = ($event) => _ctx.scaleFn("add", $event))
}, _hoisted_7),
_ctx.isReset ? (openBlock(), createElementBlock("i", {
key: 0,
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.resetFn && _ctx.resetFn(...args))
}, _hoisted_9)) : createCommentVNode("", true),
_ctx.isReset === false ? (openBlock(), createElementBlock("i", {
key: 1,
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.resetFn && _ctx.resetFn(...args))
}, _hoisted_11)) : createCommentVNode("", true),
createElementVNode("i", {
onClick: _cache[5] || (_cache[5] = ($event) => _ctx.rotateFn("left"))
}, _hoisted_13),
createElementVNode("i", {
onClick: _cache[6] || (_cache[6] = ($event) => _ctx.rotateFn("right"))
}, _hoisted_15)
], 32),
createElementVNode("div", {
class: "image-std__pre-img",
onMousewheel: _cache[10] || (_cache[10] = ($event) => _ctx.scaleFn("wheel", $event)),
onDblclick: _cache[11] || (_cache[11] = withModifiers((...args) => _ctx.cloxeFn && _ctx.cloxeFn(...args), ["stop"]))
}, [
createElementVNode("div", {
ref: "refPreBox",
onMousedown: _cache[8] || (_cache[8] = (...args) => _ctx.mouseFn && _ctx.mouseFn(...args)),
onDblclick: _cache[9] || (_cache[9] = withModifiers(() => {
}, ["stop"]))
}, [
createElementVNode("img", {
ref: "refPreImg",
src: _ctx.imgSrc,
alt: "#"
}, null, 8, _hoisted_16)
], 544)
], 32)
])) : createCommentVNode("", true)
]);
}
var ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c82f5d40"]]);
export { ImagePreview as default };