yanzhen-design-vue
Version:
84 lines (83 loc) • 1.82 kB
JavaScript
import { buildProps } from "@yanzhen-libs/utils-vue";
const imageViewerProps = buildProps({
fileList: {
type: Array,
default: () => []
},
isUploadViewer: Boolean
});
const imgCanPreviewFormats = [
"png",
"jpg",
"jpeg",
"gif",
"bmp",
"tif",
"apng",
"webp",
"ico"
];
const PICTURE_VIEWER_OPTIONS = {
title: false,
button: false,
minZoomRatio: 0.2,
maxZoomRatio: 5,
toolbar: {
zoomIn: true,
zoomOut: true,
oneToOne: true,
reset: true,
prev: true,
play: false,
custom: {
title: "play",
onClick: (event) => {
console.log("PlayPlayPlay", event);
}
},
next: true,
rotateLeft: true,
rotateRight: true,
flipHorizontal: true,
flipVertical: true
},
hide: (e) => {
console.log("hide-hide", e);
handleViewerHiddenRemoveEl();
}
};
const createCustomElementWithChildren = (className, children, onClick) => {
const elements = document.querySelectorAll(className);
if (!elements.length) {
const element = document.createElement("div");
element.className = className;
if (onClick) {
element.addEventListener("click", onClick);
}
children.forEach((child) => {
element.appendChild(child);
});
document.body.appendChild(element);
return element;
}
return null;
};
const handleViewerHiddenRemoveEl = () => {
const elementsToRemove = [
".image-viewer-top",
".image-prev",
".image-next",
".image-viewer-counts"
];
elementsToRemove.forEach((selector) => {
const elements = Array.from(document.querySelectorAll(selector));
elements.forEach((element) => element.remove());
});
};
export {
PICTURE_VIEWER_OPTIONS,
createCustomElementWithChildren,
handleViewerHiddenRemoveEl,
imageViewerProps,
imgCanPreviewFormats
};