cione-comp-lib/lib/packages/co-image-senior/index2.js

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("vue");require("./index.vue_vue_type_style_index_0_scoped_true_lang.js");var t=require("../../_virtual/plugin-vue_export-helper.js");const o=e.defineComponent({name:"CoImageSenior",props:{urlObj:{type:Object,required:!0},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(t){const o=e.ref(t.urlObj.imgUrl),a=e.ref(t.urlObj.iconUrl),l=e.ref(),r=e.ref(),s=e.ref(),n=e.ref(),c=e.ref(-1),i=e.ref();e.ref(!0);const m=e.ref([]),p=e.ref(0),u=e.ref(-1),g=()=>{e.nextTick((()=>{p.value=0,m.value=[],s.value&&s.value.forEach(((e,o)=>{let a=r.value[o].offsetTop,s=r.value[o].offsetLeft,n=e.offsetWidth,c=e.offsetHeight;c<a?n/2>=s?m.value.push(`50px,calc(-50% + ${t.iconWidth}px)`):l.value.offsetWidth-s<=n/2?m.value.push(`-${n+10}px,calc(-50% + ${t.iconWidth}px)`):m.value.push(`calc(-50% + ${t.iconWidth}px),-${c+10}px`):n/2>=s?m.value.push(`50px,calc(-50% + ${t.iconWidth}px)`):l.value.offsetWidth-s<=n/2?m.value.push(`-${n+10}px,calc(-50% + ${t.iconWidth}px)`):m.value.push(`calc(-50% + ${t.iconWidth}px),50px`)})),e.nextTick((()=>{p.value=1}))}))};return e.watch((()=>t.urlObj.imgUrl),(()=>{o.value=t.urlObj.imgUrl})),e.watch((()=>t.urlObj.iconUrl),(()=>{a.value=t.urlObj.iconUrl})),e.watch((()=>t.hotspotData),(()=>{g()}),{deep:!0}),e.watch((()=>t.hotspotMsgData),(()=>{g()}),{deep:!0}),e.onMounted((()=>{g()})),{imgUrl:o,iconUrl:a,msgShowIndex:c,lookHotspotDom:l,singleHotspotDom:r,msgBoxDom:s,iconDom:n,placeArr:m,placeOpacity:p,msgHoverNum:u,msgShowClickFn:e=>{if(c.value===e)return clearTimeout(i.value),void(c.value=-1);"click"===t.eventType&&(clearTimeout(i.value),c.value=e,i.value=setTimeout((()=>{c.value=-1}),5e3))},msgShowMouseoverFn:e=>{u.value=e,"mouseover"===t.eventType&&(clearTimeout(i.value),c.value=e)},msgHideFn:e=>{u.value=-1,clearTimeout(i.value),"1"===e?"mouseover"===t.eventType?i.value=setTimeout((()=>{c.value=-1}),500):i.value=setTimeout((()=>{c.value=-1}),5e3):"0"===e&&clearTimeout(i.value)},msgPlaceDataFn:g,...e.toRefs(t)}}}),a={class:"image-senior__originalImg"},l=["onClick","onMouseover"],r={class:"hotspot-msg-header"},s={key:0,class:"hotspot-msg-text"},n={class:"msg-text"},c={class:"msg-text-left"},i={class:"msg-text-right"},m={key:1,class:"hotspot-msg-img"},p=["src"],u={key:2,class:"hotspot-msg-video"},g=["src"],d={key:3,class:"hotspot-msg-rich-text",style:{width:"100%",height:"100%"}},h=["innerHTML"],v=["src"];var f=t.default(o,[["render",function(t,o,f,k,y,x){return e.openBlock(),e.createElementBlock("div",{class:"co-image-senior",style:e.normalizeStyle({width:t.width||"100%",height:t.height||"100%"})},[e.createElementVNode("div",a,[e.createElementVNode("div",{class:"look__hotspot",style:e.normalizeStyle({backgroundImage:`url(${t.imgUrl})`,opacity:t.opacity/100,backgroundRepeat:"repeat"===t.backgroundSize?"repeat":"no-repeat",backgroundSize:"repeat"===t.backgroundSize?"inherit":t.backgroundSize,backgroundPosition:"left top"}),ref:"lookHotspotDom"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hotspotData,((a,f)=>(e.openBlock(),e.createElementBlock("div",{class:"look__single-hotspot",ref_for:!0,ref:"singleHotspotDom",style:e.normalizeStyle({top:`calc(${a.preTop} - ${t.iconWidth}px)`,left:`calc(${a.preLeft} - ${t.iconWidth}px)`}),onClick:e=>t.msgShowClickFn(f),onMouseover:e=>t.msgShowMouseoverFn(f),onMouseout:o[6]||(o[6]=e=>t.msgHideFn("1"))},[a.show?(e.openBlock(),e.createElementBlock("div",{key:0,class:"single-hotspot-box",style:e.normalizeStyle({pointerEvents:t.msgShowIndex===f?"auto":"none"})},[e.createElementVNode("div",{class:"single-hotspot-msg",ref_for:!0,ref:"msgBoxDom",onMouseover:o[4]||(o[4]=e.withModifiers((e=>t.msgHideFn("0")),["prevent"])),onMouseout:o[5]||(o[5]=e.withModifiers((e=>t.msgHideFn("1")),["prevent"])),style:e.normalizeStyle({width:t.hotspotMsgData[f].message[0].width?t.hotspotMsgData[f].message[0].width+"px":"240px",transform:`translate(${t.placeArr[f]})`,opacity:t.msgShowIndex===f?t.placeOpacity:0})},[e.createElementVNode("div",r,e.toDisplayString(t.hotspotMsgData[f].hotspotName),1),"文本"===a.msgType?(e.openBlock(),e.createElementBlock("div",s,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hotspotMsgData[f].message,(t=>(e.openBlock(),e.createElementBlock("div",n,[e.createElementVNode("div",c,e.toDisplayString(t.title),1),e.createElementVNode("div",i,e.toDisplayString(t.value),1)])))),256))])):e.createCommentVNode("",!0),"图片"===a.msgType?(e.openBlock(),e.createElementBlock("div",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hotspotMsgData[f].message,(a=>(e.openBlock(),e.createElementBlock("img",{src:a.imgSrc,alt:"",onLoad:o[0]||(o[0]=(...e)=>t.msgPlaceDataFn&&t.msgPlaceDataFn(...e)),onError:o[1]||(o[1]=(...e)=>t.msgPlaceDataFn&&t.msgPlaceDataFn(...e))},null,40,p)))),256))])):e.createCommentVNode("",!0),"视频"===a.msgType?(e.openBlock(),e.createElementBlock("div",u,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hotspotMsgData[f].message,(a=>(e.openBlock(),e.createElementBlock("video",{src:a.videoSrc,autoplay:"",muted:"",controls:"true",key:a.videoSrc,onCanplay:o[2]||(o[2]=(...e)=>t.msgPlaceDataFn&&t.msgPlaceDataFn(...e)),onError:o[3]||(o[3]=(...e)=>t.msgPlaceDataFn&&t.msgPlaceDataFn(...e))},null,40,g)))),128))])):e.createCommentVNode("",!0),"富文本"===a.msgType?(e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",{innerHTML:t.hotspotMsgData[f].message[0].textMsg},null,8,h)])):e.createCommentVNode("",!0)],36),e.createElementVNode("img",{src:t.hotspotMsgData[f].hotspotIcon,alt:"#",class:"hotspot-icon",ref_for:!0,ref:"iconDom",style:e.normalizeStyle({width:t.iconWidth+"px",height:t.iconHeight+"px",transform:`scale(${t.msgShowIndex===f||t.msgHoverNum===f?1.5:1})`})},null,12,v)],4)):e.createCommentVNode("",!0)],44,l)))),256))],4)])],4)}],["__scopeId","data-v-51167a42"]]);exports.default=f;