yanzhen-design-vue
Version:
217 lines (216 loc) • 8.7 kB
JavaScript
import { defineComponent, reactive, computed, ref, unref, onMounted, openBlock, createElementBlock, Fragment, createBlock, normalizeProps, mergeProps, normalizeClass, normalizeStyle, createCommentVNode, createElementVNode, toDisplayString, renderList, withModifiers, createVNode, withCtx } from "vue";
import { Image, Tooltip } from "ant-design-vue";
import { parseJson, isArray } from "@yanzhen-libs/utils";
import { isString } from "lodash-es";
import "../../image-preview/index.mjs";
import { YzIcon } from "../../icon/index.mjs";
import "../../_utils/index.mjs";
import "../../image-viewer/src/image-viewer.vue.mjs";
import { imageName, imageProps, imageEmits, imageOptions } from "./image.mjs";
import { useViewerApi } from "../../image-preview/src/api/viewerApi.mjs";
import { jsonParse } from "../../_utils/tool.mjs";
import _sfc_main$1 from "../../image-viewer/src/image-viewer.vue2.mjs";
const _hoisted_1 = ["src"];
const _hoisted_2 = ["src", "onClick"];
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ name: imageName },
__name: "image",
props: imageProps,
emits: imageEmits,
setup(__props, { emit: __emit }) {
const image = useViewerApi();
const { class: wrapClass } = imageOptions;
const props = __props;
const emit = __emit;
const $this = reactive({
iWidth: 0,
iHeight: 0,
tWidth: 0,
tHeight: 0,
iconSize: {
small: 28,
middle: 42,
large: 64
}
});
const imgUrl = computed(() => {
const url = props.url;
const imgArray = jsonParse(url, []);
return imgArray && imgArray[0] || "";
});
const images = computed(() => {
let images2 = props.imgUrls;
if (isString(props.imgUrls)) {
images2 = parseJson(props.imgUrls, []);
}
return isArray(images2) ? images2 : [];
});
const componentWarpStyle = computed(() => {
const { iWidth, iHeight, tWidth, tHeight } = $this;
const textPosition = props.textPosition || "bottom";
if (iWidth && iHeight && tWidth && tHeight) {
let width, height;
if (textPosition === "bottom" || textPosition === "up") {
width = iWidth;
height = iHeight + tHeight;
} else if (textPosition === "left" || textPosition === "right") {
width = iWidth + tWidth;
height = iHeight;
}
return {
width: `${width}px`,
height: `${height}px`
};
}
return {};
});
const customClass = computed(() => {
return props.size;
});
const reName = computed(() => {
let data = "";
if (props.name) {
data = props.name.slice(-2);
}
return data;
});
const currentStyle = computed(() => {
return {
fontSize: `${$this.iconSize[props.size]}px`
};
});
const imageRef = ref();
const textRef = ref();
const queryWarpWidthHeight = () => {
const image2 = imageRef.value;
const text = textRef.value;
if (image2 || text) {
const { isIcon, showName, size } = props;
$this.iWidth = isIcon ? $this.iconSize[size] : image2.offsetWidth;
$this.iHeight = isIcon ? $this.iconSize[size] : image2.offsetHeight;
$this.tWidth = showName ? text.offsetWidth : 0;
$this.tHeight = showName ? text.offsetHeight : 0;
}
};
const imageViewerRef = ref(null);
const handleClick = (type, index = 0) => {
console.log("数据详情-图片预览", type, imgUrl.value, image);
if (type === "image" && imgUrl.value) {
if (imageViewerRef.value) {
imageViewerRef.value.open(unref(images), index, {
onlyUrl: true,
images: unref(images)
});
}
}
};
const handleImgClick = (type, index) => {
console.log("数据详情-图片预览-改造", type, index);
handleClick(type, index);
};
const load = (e) => {
emit("load", e);
};
onMounted(() => {
queryWarpWidthHeight();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
props.nativeTag === "a-image" ? (openBlock(), createBlock(unref(Image), normalizeProps(mergeProps({ key: 0 }, props)), null, 16)) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["smart-design-component-warp", [props.textPosition || "bottom", unref(wrapClass)]]),
style: normalizeStyle(componentWarpStyle.value)
}, [
props.isIcon ? (openBlock(), createElementBlock("div", {
key: 0,
class: "smart-design-icon-warp",
onClick: _cache[0] || (_cache[0] = ($event) => handleClick("icon"))
}, [
props.icon ? (openBlock(), createBlock(unref(YzIcon), mergeProps({
key: 0,
ref_key: "imageRef",
ref: imageRef
}, _ctx.$attrs, {
type: props.icon,
style: { ...currentStyle.value, ...props.iconStyle },
spin: props.isSpin
}), null, 16, ["type", "style", "spin"])) : createCommentVNode("", true),
imgUrl.value ? (openBlock(), createElementBlock("img", {
key: 1,
ref_key: "imageRef",
ref: imageRef,
class: normalizeClass(["smart-design-image", [{ "is-round": props.isRound }, customClass.value]]),
style: normalizeStyle(props.imgStyle),
src: imgUrl.value,
alt: ""
}, null, 14, _hoisted_1)) : createCommentVNode("", true)
])) : (openBlock(), createElementBlock("div", {
key: 1,
class: "smart-design-image-warp",
onClick: _cache[1] || (_cache[1] = ($event) => handleClick("image"))
}, [
props.isImageShowInTable ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["vertical-center", { "show-pointer": images.value.length }])
}, [
_cache[2] || (_cache[2] = createElementVNode("span", { class: "icon iconfont icon-B_picture" }, null, -1)),
createElementVNode("span", {
class: normalizeClass(["img-table-list", { "img-num": images.value.length }])
}, toDisplayString(images.value.length || "-"), 3)
], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
imgUrl.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(images.value, (image2, index) => {
return openBlock(), createElementBlock("img", {
key: index,
ref_for: true,
ref_key: "imageRef",
ref: imageRef,
draggable: "false",
class: normalizeClass(["smart-design-image scale-down", [{ "is-round": props.isRound }, customClass.value]]),
style: normalizeStyle(props.imgStyle),
src: image2,
alt: "",
onLoad: load,
onClick: withModifiers(($event) => handleImgClick("image", index), ["stop"])
}, null, 46, _hoisted_2);
}), 128)) : createCommentVNode("", true)
], 64)),
props.name ? (openBlock(), createElementBlock("div", {
key: 2,
ref_key: "imageRef",
ref: imageRef,
class: normalizeClass(["smart-design-name", [{ "is-round": props.isRound }, customClass.value]]),
style: normalizeStyle(props.imgStyle)
}, toDisplayString(reName.value), 7)) : createCommentVNode("", true)
])),
createVNode(unref(Tooltip), {
placement: "right",
title: props.name,
"auto-adjust-overflow": true
}, {
default: withCtx(() => [
props.showName ? (openBlock(), createElementBlock("div", {
key: 0,
ref_key: "textRef",
ref: textRef,
class: "smart-design-text-warp"
}, [
createElementVNode("span", {
class: normalizeClass(customClass.value)
}, toDisplayString(props.name), 3)
], 512)) : createCommentVNode("", true)
]),
_: 1
}, 8, ["title"])
], 6)),
images.value.length ? (openBlock(), createBlock(_sfc_main$1, {
key: 2,
ref_key: "imageViewerRef",
ref: imageViewerRef
}, null, 512)) : createCommentVNode("", true)
], 64);
};
}
});
export {
_sfc_main as default
};