cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
313 lines (312 loc) • 11.6 kB
JavaScript
import { defineComponent, ref, watch, onMounted, toRefs, nextTick, openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, withModifiers, toDisplayString, createCommentVNode } from "vue";
import "./index.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: "CoImageSenior",
props: {
urlObj: {
type: Object,
required: true
},
width: {
type: String
},
height: {
type: String
},
iconWidth: {
type: Number,
default: 48
},
iconHeight: {
type: Number,
default: 48
},
eventType: {
type: String,
default: "mouseover"
},
opacity: {
type: Number,
default: 100
},
backgroundSize: {
type: String
},
hotspotData: {
type: Array,
default: () => {
}
},
hotspotMsgData: {
type: Array,
default: () => {
}
}
},
setup(props) {
const imgUrl = ref(props.urlObj.imgUrl);
const iconUrl = ref(props.urlObj.iconUrl);
const lookHotspotDom = ref();
const singleHotspotDom = ref();
const msgBoxDom = ref();
const iconDom = ref();
const msgShowIndex = ref(-1);
const msgHideTimer = ref();
ref(true);
const placeArr = ref([]);
const placeOpacity = ref(0);
const msgHoverNum = ref(-1);
const msgShowClickFn = (ind) => {
if (msgShowIndex.value === ind) {
clearTimeout(msgHideTimer.value);
msgShowIndex.value = -1;
return;
}
if (props.eventType !== "click")
return;
clearTimeout(msgHideTimer.value);
msgShowIndex.value = ind;
msgHideTimer.value = setTimeout(() => {
msgShowIndex.value = -1;
}, 5e3);
};
const msgShowMouseoverFn = (ind) => {
msgHoverNum.value = ind;
if (props.eventType !== "mouseover")
return;
clearTimeout(msgHideTimer.value);
msgShowIndex.value = ind;
};
const msgHideFn = (suoyin) => {
msgHoverNum.value = -1;
clearTimeout(msgHideTimer.value);
if (suoyin === "1") {
if (props.eventType === "mouseover") {
msgHideTimer.value = setTimeout(() => {
msgShowIndex.value = -1;
}, 500);
} else {
msgHideTimer.value = setTimeout(() => {
msgShowIndex.value = -1;
}, 5e3);
}
} else if (suoyin === "0") {
clearTimeout(msgHideTimer.value);
}
};
const msgPlaceDataFn = () => {
nextTick(() => {
placeOpacity.value = 0;
placeArr.value = [];
if (msgBoxDom.value) {
msgBoxDom.value.forEach((element, index) => {
let boxTop = singleHotspotDom.value[index].offsetTop;
let boxLeft = singleHotspotDom.value[index].offsetLeft;
let eleWidth = element.offsetWidth;
let eleHeight = element.offsetHeight;
if (eleHeight < boxTop) {
if (eleWidth / 2 >= boxLeft) {
placeArr.value.push(`50px,calc(-50% + ${props.iconWidth}px)`);
} else if (lookHotspotDom.value.offsetWidth - boxLeft <= eleWidth / 2) {
placeArr.value.push(`-${eleWidth + 10}px,calc(-50% + ${props.iconWidth}px)`);
} else {
placeArr.value.push(`calc(-50% + ${props.iconWidth}px),-${eleHeight + 10}px`);
}
} else {
if (eleWidth / 2 >= boxLeft) {
placeArr.value.push(`50px,calc(-50% + ${props.iconWidth}px)`);
} else if (lookHotspotDom.value.offsetWidth - boxLeft <= eleWidth / 2) {
placeArr.value.push(`-${eleWidth + 10}px,calc(-50% + ${props.iconWidth}px)`);
} else {
placeArr.value.push(`calc(-50% + ${props.iconWidth}px),${50}px`);
}
}
});
}
nextTick(() => {
placeOpacity.value = 1;
});
});
};
watch(
() => props.urlObj.imgUrl,
() => {
imgUrl.value = props.urlObj.imgUrl;
}
);
watch(
() => props.urlObj.iconUrl,
() => {
iconUrl.value = props.urlObj.iconUrl;
}
);
watch(
() => props.hotspotData,
() => {
msgPlaceDataFn();
},
{ deep: true }
);
watch(
() => props.hotspotMsgData,
() => {
msgPlaceDataFn();
},
{ deep: true }
);
onMounted(() => {
msgPlaceDataFn();
});
return {
imgUrl,
iconUrl,
msgShowIndex,
lookHotspotDom,
singleHotspotDom,
msgBoxDom,
iconDom,
placeArr,
placeOpacity,
msgHoverNum,
msgShowClickFn,
msgShowMouseoverFn,
msgHideFn,
msgPlaceDataFn,
...toRefs(props)
};
}
});
const _hoisted_1 = { class: "image-senior__originalImg" };
const _hoisted_2 = ["onClick", "onMouseover"];
const _hoisted_3 = { class: "hotspot-msg-header" };
const _hoisted_4 = {
key: 0,
class: "hotspot-msg-text"
};
const _hoisted_5 = { class: "msg-text" };
const _hoisted_6 = { class: "msg-text-left" };
const _hoisted_7 = { class: "msg-text-right" };
const _hoisted_8 = {
key: 1,
class: "hotspot-msg-img"
};
const _hoisted_9 = ["src"];
const _hoisted_10 = {
key: 2,
class: "hotspot-msg-video"
};
const _hoisted_11 = ["src"];
const _hoisted_12 = {
key: 3,
class: "hotspot-msg-rich-text",
style: { width: "100%", height: "100%" }
};
const _hoisted_13 = ["innerHTML"];
const _hoisted_14 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: "co-image-senior",
style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
}, [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", {
class: "look__hotspot",
style: normalizeStyle({
backgroundImage: `url(${_ctx.imgUrl})`,
opacity: _ctx.opacity / 100,
backgroundRepeat: _ctx.backgroundSize === "repeat" ? "repeat" : "no-repeat",
backgroundSize: _ctx.backgroundSize === "repeat" ? "inherit" : _ctx.backgroundSize,
backgroundPosition: "left top"
}),
ref: "lookHotspotDom"
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hotspotData, (item, index) => {
return openBlock(), createElementBlock("div", {
class: "look__single-hotspot",
ref_for: true,
ref: "singleHotspotDom",
style: normalizeStyle({
top: `calc(${item.preTop} - ${_ctx.iconWidth}px)`,
left: `calc(${item.preLeft} - ${_ctx.iconWidth}px)`
}),
onClick: ($event) => _ctx.msgShowClickFn(index),
onMouseover: ($event) => _ctx.msgShowMouseoverFn(index),
onMouseout: _cache[6] || (_cache[6] = ($event) => _ctx.msgHideFn("1"))
}, [
item.show ? (openBlock(), createElementBlock("div", {
key: 0,
class: "single-hotspot-box",
style: normalizeStyle({ pointerEvents: _ctx.msgShowIndex === index ? "auto" : "none" })
}, [
createElementVNode("div", {
class: "single-hotspot-msg",
ref_for: true,
ref: "msgBoxDom",
onMouseover: _cache[4] || (_cache[4] = withModifiers(($event) => _ctx.msgHideFn("0"), ["prevent"])),
onMouseout: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.msgHideFn("1"), ["prevent"])),
style: normalizeStyle({
width: _ctx.hotspotMsgData[index].message[0].width ? _ctx.hotspotMsgData[index].message[0].width + "px" : "240px",
transform: `translate(${_ctx.placeArr[index]})`,
opacity: _ctx.msgShowIndex === index ? _ctx.placeOpacity : 0
})
}, [
createElementVNode("div", _hoisted_3, toDisplayString(_ctx.hotspotMsgData[index].hotspotName), 1),
item.msgType === "\u6587\u672C" ? (openBlock(), createElementBlock("div", _hoisted_4, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hotspotMsgData[index].message, (val) => {
return openBlock(), createElementBlock("div", _hoisted_5, [
createElementVNode("div", _hoisted_6, toDisplayString(val.title), 1),
createElementVNode("div", _hoisted_7, toDisplayString(val.value), 1)
]);
}), 256))
])) : createCommentVNode("", true),
item.msgType === "\u56FE\u7247" ? (openBlock(), createElementBlock("div", _hoisted_8, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hotspotMsgData[index].message, (val) => {
return openBlock(), createElementBlock("img", {
src: val.imgSrc,
alt: "",
onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.msgPlaceDataFn && _ctx.msgPlaceDataFn(...args)),
onError: _cache[1] || (_cache[1] = (...args) => _ctx.msgPlaceDataFn && _ctx.msgPlaceDataFn(...args))
}, null, 40, _hoisted_9);
}), 256))
])) : createCommentVNode("", true),
item.msgType === "\u89C6\u9891" ? (openBlock(), createElementBlock("div", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hotspotMsgData[index].message, (val) => {
return openBlock(), createElementBlock("video", {
src: val.videoSrc,
autoplay: "",
muted: "",
controls: "true",
key: val.videoSrc,
onCanplay: _cache[2] || (_cache[2] = (...args) => _ctx.msgPlaceDataFn && _ctx.msgPlaceDataFn(...args)),
onError: _cache[3] || (_cache[3] = (...args) => _ctx.msgPlaceDataFn && _ctx.msgPlaceDataFn(...args))
}, null, 40, _hoisted_11);
}), 128))
])) : createCommentVNode("", true),
item.msgType === "\u5BCC\u6587\u672C" ? (openBlock(), createElementBlock("div", _hoisted_12, [
createElementVNode("div", {
innerHTML: _ctx.hotspotMsgData[index].message[0].textMsg
}, null, 8, _hoisted_13)
])) : createCommentVNode("", true)
], 36),
createElementVNode("img", {
src: _ctx.hotspotMsgData[index].hotspotIcon,
alt: "#",
class: "hotspot-icon",
ref_for: true,
ref: "iconDom",
style: normalizeStyle({
width: _ctx.iconWidth + "px",
height: _ctx.iconHeight + "px",
transform: `scale(${_ctx.msgShowIndex === index || _ctx.msgHoverNum === index ? 1.5 : 1})`
})
}, null, 12, _hoisted_14)
], 4)) : createCommentVNode("", true)
], 44, _hoisted_2);
}), 256))
], 4)
])
], 4);
}
var CoImageSenior = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-51167a42"]]);
export { CoImageSenior as default };