| 123456789 |
- import{_ as F,aD as M,bk as x}from"./entry/index-CRWhxBeP.js";import{d as S,f as r,Z as C,_ as A,$ as f,ad as V,ab as y,G as p,a0 as b,a1 as B,c as _,h as W,a4 as E,a5 as a,a9 as T,y as D,k as v,u as c}from"./vue-DM5HGU8Z.js";import{P as R}from"./index-C0mnMlct.js";import"./antd-BfqWtMX3.js";import"./useContentViewHeight-D9So7_ch.js";import"./useWindowSizeFn-CEueHQop.js";import"./onMountedOrActivated-Ckq_czNf.js";function P(m,n=0,t=!1){const l=typeof window!="undefined"?window.requestAnimationFrame:()=>{};let i=null;function o(u){i||(i=u),u-i>=n?(m(),t&&(i=null,s.id=l(o))):s.id=l(o)}const s={id:l(o)};return s}function H(m){const n=typeof window!="undefined"?window.cancelAnimationFrame:()=>{};m&&m.id&&n(m.id)}const I=S({__name:"Tooltip",props:{maxWidth:{default:120},content:{default:"暂无内容"},tooltip:{default:"暂无提示"},fontSize:{default:14},color:{default:"#FFF"},backgroundColor:{default:"rgba(0, 0, 0, .85)"},overlayStyle:{default:()=>({})}},emits:["openChange"],setup(m,{emit:n}){const t=r(!1),l=r(),i=r(0),o=r(0),s=r(),u=r();function w(){const d=s.value&&s.value.offsetWidth,k=u.value&&u.value.offsetWidth,z=u.value&&u.value.offsetHeight;i.value=z+4,o.value=(k-d)/2}const e=n;function h(){w(),H(l.value),t.value=!0,e("openChange",t.value)}function g(){l.value=P(()=>{t.value=!1,e("openChange",t.value)},100)}return(d,k)=>(C(),A("div",{class:"m-tooltip",onMouseenter:h,onMouseleave:g},[f("div",{ref_key:"tooltipRef",ref:u,class:B(["m-tooltip-content",{"show-tip":t.value}]),style:V(`--tooltip-font-size: ${d.fontSize}px; --tooltip-color: ${d.color}; --tooltip-background-color: ${d.backgroundColor}; max-width: ${d.maxWidth}px; top: ${-i.value}px; left: ${-o.value}px;`),onMouseenter:h,onMouseleave:g},[f("div",{class:"u-tooltip",style:V(d.overlayStyle)},[y(d.$slots,"tooltip",{},()=>[p(b(d.tooltip),1)],!0)],4),k[0]||(k[0]=f("div",{class:"m-tooltip-arrow"},[f("span",{class:"u-tooltip-arrow"})],-1))],38),f("div",{ref_key:"contentRef",ref:s},[y(d.$slots,"default",{},()=>[p(b(d.content),1)],!0)],512)],32))}}),N=F(I,[["__scopeId","data-v-7700551a"]]),q=S({__name:"EllipsisText",props:{maxWidth:{default:"100%"},line:{default:void 0},expand:{type:Boolean,default:!1},tooltip:{type:Boolean,default:!0},tooltipMaxWidth:{default:void 0},tooltipFontSize:{default:14},tooltipColor:{default:"#FFF"},tooltipBackgroundColor:{default:"rgba(0, 0, 0, .85)"},tooltipOverlayStyle:{default:()=>({padding:"8px 12px",textAlign:"justify"})}},emits:["expandChange"],setup(m,{emit:n}){const t=m,l=_(()=>typeof t.maxWidth=="number"?t.maxWidth+"px":t.maxWidth),i=r(),o=r(),s=r();W(()=>{i.value=t.tooltip}),W(()=>{t.tooltip&&(t.tooltipMaxWidth?s.value=t.tooltipMaxWidth:s.value=o.value.offsetWidth+24)},{flush:"post"});const u=n;function w(){o.value.style["-webkit-line-clamp"]?(t.tooltip?(i.value=!1,D(()=>{o.value.style["-webkit-line-clamp"]=""})):o.value.style["-webkit-line-clamp"]="",u("expandChange",!0)):(t.tooltip&&(i.value=!0),o.value.style["-webkit-line-clamp"]=t.line,u("expandChange",!1))}return(e,h)=>i.value?(C(),E(N,{key:0,"max-width":s.value,fontSize:e.tooltipFontSize,color:e.tooltipColor,backgroundColor:e.tooltipBackgroundColor,overlayStyle:e.tooltipOverlayStyle},{tooltip:a(()=>[y(e.$slots,"tooltip",{},()=>[y(e.$slots,"default",{},void 0,!0)],!0)]),default:a(()=>[f("div",T({ref_key:"ellipsis",ref:o,class:["m-ellipsis",[e.line?"ellipsis-line":"not-ellipsis-line",{"cursor-pointer":e.expand}]],style:`-webkit-line-clamp: ${e.line}; max-width: ${l.value};`,onClick:h[0]||(h[0]=g=>e.expand?w():()=>!1)},e.$attrs),[y(e.$slots,"default",{},void 0,!0)],16)]),_:3},8,["max-width","fontSize","color","backgroundColor","overlayStyle"])):(C(),A("div",T({key:1,ref_key:"ellipsis",ref:o,class:["m-ellipsis",[e.line?"ellipsis-line":"not-ellipsis-line",{"cursor-pointer":e.expand}]],style:`-webkit-line-clamp: ${e.line}; max-width: ${l.value};`,onClick:h[1]||(h[1]=g=>e.expand?w():()=>!1)},e.$attrs),[y(e.$slots,"default",{},void 0,!0)],16))}}),O=F(q,[["__scopeId","data-v-28036376"]]),$=M(O),U=S({__name:"index",setup(m){const n=r(`
- Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
- 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。
- 也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
- 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。
- 也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
- 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。
- 也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。
- `);return(t,l)=>(C(),E(c(R),{title:"文本省略示例"},{default:a(()=>[v(c(x),{class:"w-full bg-white rounded-md mb-4",title:"Ellipsis 基本使用"},{default:a(()=>[v(c($),{maxWidth:240},{default:a(()=>[p(b(n.value),1)]),_:1})]),_:1}),v(c(x),{class:"w-full bg-white rounded-md mb-4",title:"Ellipsis 多行省略"},{default:a(()=>[v(c($),{line:2},{default:a(()=>[p(b(n.value),1)]),_:1})]),_:1}),v(c(x),{class:"w-full bg-white rounded-md mb-4",title:"Ellipsis 点击展开"},{default:a(()=>[v(c($),{expand:"",line:3},{default:a(()=>[p(b(n.value),1)]),_:1})]),_:1}),v(c(x),{class:"w-full bg-white rounded-md mb-4",title:"Ellipsis 定制 Tooltip 内容"},{default:a(()=>[v(c($),{"max-width":240},{tooltip:a(()=>l[0]||(l[0]=[f("div",{style:{"text-align":"center"}},[p(" 《秦皇岛》"),f("br"),p("住在我心里孤独的"),f("br"),p("孤独的海怪 痛苦之王"),f("br"),p("开始厌倦 深海的光 停滞的海浪 ")],-1)])),default:a(()=>[l[1]||(l[1]=p(" 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪 "))]),_:1})]),_:1})]),_:1}))}});export{U as default};
|