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