epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 3.94 kB
JavaScript
;const e=require("vue"),O=["tabindex"],H={class:"ep-tooltip-content"},W={key:0,class:"ep-tooltip-arrow"},X=e.defineComponent({__name:"tooltip",props:{arrow:{type:Boolean,default:!0},color:{default:"default"},content:{default:""},mouseEnterDelay:{default:600},mouseLeaveDelay:{default:100},open:{type:Boolean,default:void 0},overlayClassName:{default:""},overlayStyle:{default:()=>({})},placement:{default:"top"},trigger:{default:"hover"}},emits:["openChange","update:open","visibleChange"],setup(c,{emit:x}){const t=c,o=x,l=e.ref(!1),d=e.ref(null),u=e.ref(null),D=e.ref(null),C=e.ref(!1);let m=null,h=null,g=null;const f=()=>{m&&(clearTimeout(m),m=null),h&&(clearTimeout(h),h=null),g&&(clearTimeout(g),g=null)},T=()=>{l.value||C.value||(f(),t.mouseEnterDelay>0?m=window.setTimeout(()=>{l.value=!0,o("update:open",!0),o("openChange",!0),o("visibleChange",!0),p()},t.mouseEnterDelay):(l.value=!0,o("update:open",!0),o("openChange",!0),o("visibleChange",!0),p()))},b=()=>{l.value&&(f(),t.mouseLeaveDelay>0?h=window.setTimeout(()=>{l.value=!1,o("update:open",!1),o("openChange",!1),o("visibleChange",!1)},t.mouseLeaveDelay):(l.value=!1,o("update:open",!1),o("openChange",!1),o("visibleChange",!1)))},E=()=>{t.trigger==="hover"&&(f(),g=window.setTimeout(()=>{b()},100))},S=()=>{l.value?E():T()},L=()=>{t.trigger==="hover"&&(C.value=!1,T())},M=()=>{t.trigger==="hover"&&E()},V=()=>{t.trigger==="click"&&S(),C.value=!0,f(),b()};function p(){if(!d.value||!u.value)return;const v=Array.from(d.value.childNodes).find(z=>z.nodeType===Node.ELEMENT_NODE),i=v?v.getBoundingClientRect():{bottom:0,height:0,left:0,right:0,top:0,width:0},a=u.value.getBoundingClientRect(),w=window.pageXOffset||document.documentElement.scrollLeft,y=window.pageYOffset||document.documentElement.scrollTop;let r=0,s=0;const k=8;switch(t.placement){case"bottom":{r=i.bottom+y+k,s=i.left+w+(i.width-a.width)/2;break}case"left":{r=i.top+y+(i.height-a.height)/2,s=i.left+w-a.width-k;break}case"right":{r=i.top+y+(i.height-a.height)/2,s=i.right+w+k;break}case"top":{r=i.top+y-a.height-k,s=i.left+w+(i.width-a.width)/2;break}}const B=window.innerWidth,R=window.innerHeight;s<8&&(s=8),s+a.width>B-8&&(s=B-a.width-8),r<8&&(r=8),r+a.height>R-8&&(r=R-a.height-8),u.value.style.top=`${r}px`,u.value.style.left=`${s}px`}const N=n=>{t.trigger==="click"&&l.value&&d.value&&!d.value.contains(n.target)&&u.value&&!u.value.contains(n.target)&&E()},$=e.computed(()=>({position:"fixed",zIndex:9999,...t.overlayStyle}));return e.onMounted(()=>{document.addEventListener("click",N),t.open!==void 0&&(l.value=t.open,t.open&&p())}),e.onUnmounted(()=>{document.removeEventListener("click",N),f()}),e.watch(l,n=>{n&&e.nextTick(p)}),e.watch(()=>t.open,n=>{n!==void 0&&(l.value=n,n&&p())}),(n,v)=>(e.openBlock(),e.createElementBlock("span",{ref_key:"wrapperRef",ref:D,class:"ep-tooltip-wrapper"},[e.createElementVNode("span",{ref_key:"triggerRef",ref:d,class:"ep-tooltip-trigger",onMouseenter:L,onMouseleave:M,onClick:V,tabindex:c.trigger==="focus"?0:void 0},[e.renderSlot(n.$slots,"default",{},void 0,!0)],40,O),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"ep-tooltip-fade"},{default:e.withCtx(()=>[l.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"tooltipRef",ref:u,class:e.normalizeClass(["ep-tooltip",[`ep-tooltip-placement-${c.placement}`,`ep-tooltip-${c.color}`]]),style:e.normalizeStyle($.value),role:"tooltip"},[e.createElementVNode("div",H,[c.arrow?(e.openBlock(),e.createElementBlock("div",W,[...v[0]||(v[0]=[e.createElementVNode("span",{class:"ep-tooltip-arrow-content"},null,-1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["ep-tooltip-inner",c.overlayClassName]),style:e.normalizeStyle(c.overlayStyle)},[e.renderSlot(n.$slots,"content",{},()=>[e.createTextVNode(e.toDisplayString(c.content),1)],!0)],6)])],6)):e.createCommentVNode("",!0)]),_:3})]))],512))}});module.exports=X;