zview-plus
Version:
基于 Vue3 的 UI 组件库
2 lines (1 loc) • 2.18 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),w=require("./tooltip.js"),_={name:"ZTooltip"},H=n.defineComponent({..._,props:w.TooltipProps,setup(y){const g=y,f=n.getCurrentInstance(),{placement:a,content:d,width:i}=n.toRefs(g),h=n.ref(!1);let s=null;function v(e){e&&e.classList.remove("z-tooltip-show")}function p(e){e&&e.classList.add("z-tooltip-show")}function x(e,t,u){let o=document.documentElement.scrollTop,l=0;return{"top-start":()=>{l+=e.x,o+=e.y-t.offsetHeight},top:()=>{l+=e.x+(e.width-t.offsetWidth)*.5,o+=e.y-t.offsetHeight},"top-end":()=>{l+=e.x+e.width-t.offsetWidth,o+=e.y-t.offsetHeight},"left-start":()=>{l+=e.x-t.offsetWidth,o+=e.y},left:()=>{l+=e.x-t.offsetWidth,o+=e.y+(e.height-t.offsetHeight)*.5},"left-end":()=>{l+=e.x-t.offsetWidth,o+=e.y+e.height-t.offsetHeight},"right-start":()=>{l+=e.x+e.width,o+=e.y},right:()=>{l+=e.x+e.width,o+=e.y+(e.height-t.offsetHeight)*.5},"right-end":()=>{l+=e.x+e.width,o+=e.y+e.height-t.offsetHeight},"bottom-start":()=>{l+=e.x,o+=e.y+e.height},bottom:()=>{l+=e.x+(e.width-t.offsetWidth)*.5,o+=e.y+e.height},"bottom-end":()=>{l+=e.x+e.width-t.offsetWidth,o+=e.y+e.height}}[u](),{x:l,y:o}}return n.onMounted(()=>{var u;const e=(u=f==null?void 0:f.proxy)==null?void 0:u.$el;s=document.createElement("div"),s.className=`z-tooltip z-tooltip-${a.value}`,i!=null&&i.value&&(s.style.width=i.value),document.body.appendChild(s),n.watchEffect(()=>{s.innerHTML=`<span>${d==null?void 0:d.value}</span>`||"",n.nextTick(()=>{var m;const o=(m=f==null?void 0:f.proxy)==null?void 0:m.$el.firstElementChild.getBoundingClientRect(),{x:l,y:r}=x(o,s,a.value);s.style.top=r+"px",s.style.left=l+"px"}),s.className=`z-tooltip z-tooltip-${a.value}`,i!=null&&i.value&&(s.style.width=i.value),h.value?p(s):v(s)}),n.onUnmounted(()=>{s&&document.body.removeChild(s)});const t=n.ref(null);e&&e.addEventListener("mouseenter",()=>{clearTimeout(t.value),h.value=!0}),e&&e.addEventListener("mouseleave",()=>{t.value=setTimeout(()=>{h.value=!1},500)})}),(e,t)=>(n.openBlock(),n.createElementBlock("span",null,[n.renderSlot(e.$slots,"default")]))}});exports.default=H;