index-BGCwI-Wj.js 6.7 KB

123456789
  1. import{_ as F,aD as M,bk as x}from"./entry/index-HR-LjmG7.js";import{d as S,f as d,Z as A,_ as C,$ as f,ad as V,a9 as y,G as r,a0 as g,a1 as B,c as _,h as W,a5 as E,a6 as a,aa as T,y as D,k as c,u as v}from"./vue-4umLpMSY.js";import{P as R}from"./index-Bes7RvFW.js";import"./antd-Cume0_44.js";import"./useContentViewHeight-Cik9Ij4N.js";import"./useWindowSizeFn-DxuYlDwu.js";import"./onMountedOrActivated-fw6WqIjB.js";function P(m,s=0,t=!1){const l=typeof window!="undefined"?window.requestAnimationFrame:()=>{};let i=null;function o(u){i||(i=u),u-i>=s?(m(),t&&(i=null,n.id=l(o))):n.id=l(o)}const n={id:l(o)};return n}function H(m){const s=typeof window!="undefined"?window.cancelAnimationFrame:()=>{};m&&m.id&&s(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:s}){const t=d(!1),l=d(),i=d(0),o=d(0),n=d(),u=d();function w(){const p=n.value&&n.value.offsetWidth,k=u.value&&u.value.offsetWidth,z=u.value&&u.value.offsetHeight;i.value=z+4,o.value=(k-p)/2}const e=s;function h(){w(),H(l.value),t.value=!0,e("openChange",t.value)}function b(){l.value=P(()=>{t.value=!1,e("openChange",t.value)},100)}return(p,k)=>(C(),A("div",{class:"m-tooltip",onMouseenter:h,onMouseleave:b},[f("div",{ref_key:"tooltipRef",ref:u,class:B(["m-tooltip-content",{"show-tip":t.value}]),style:V(`--tooltip-font-size: ${p.fontSize}px; --tooltip-color: ${p.color}; --tooltip-background-color: ${p.backgroundColor}; max-width: ${p.maxWidth}px; top: ${-i.value}px; left: ${-o.value}px;`),onMouseenter:h,onMouseleave:b},[f("div",{class:"u-tooltip",style:V(p.overlayStyle)},[y(p.$slots,"tooltip",{},()=>[r(g(p.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:n},[y(p.$slots,"default",{},()=>[r(g(p.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:s}){const t=m,l=_(()=>typeof t.maxWidth=="number"?t.maxWidth+"px":t.maxWidth),i=d(),o=d(),n=d();W(()=>{i.value=t.tooltip}),W(()=>{t.tooltip&&(t.tooltipMaxWidth?n.value=t.tooltipMaxWidth:n.value=o.value.offsetWidth+24)},{flush:"post"});const u=s;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":n.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]=b=>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]=b=>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 s=d(`
  2. Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
  3. 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。
  4. 也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
  5. 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。
  6. 也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
  7. 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。
  8. 也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。
  9. `);return(t,l)=>(C(),E(v(R),{title:"文本省略示例"},{default:a(()=>[c(v(x),{class:"w-full bg-white rounded-md mb-4",title:"Ellipsis 基本使用"},{default:a(()=>[c(v($),{maxWidth:240},{default:a(()=>[r(g(s.value),1)]),_:1})]),_:1}),c(v(x),{class:"w-full bg-white rounded-md mb-4",title:"Ellipsis 多行省略"},{default:a(()=>[c(v($),{line:2},{default:a(()=>[r(g(s.value),1)]),_:1})]),_:1}),c(v(x),{class:"w-full bg-white rounded-md mb-4",title:"Ellipsis 点击展开"},{default:a(()=>[c(v($),{expand:"",line:3},{default:a(()=>[r(g(s.value),1)]),_:1})]),_:1}),c(v(x),{class:"w-full bg-white rounded-md mb-4",title:"Ellipsis 定制 Tooltip 内容"},{default:a(()=>[c(v($),{"max-width":240},{tooltip:a(()=>l[0]||(l[0]=[f("div",{style:{"text-align":"center"}},[r(" 《秦皇岛》"),f("br"),r("住在我心里孤独的"),f("br"),r("孤独的海怪 痛苦之王"),f("br"),r("开始厌倦 深海的光 停滞的海浪 ")],-1)])),default:a(()=>[l[1]||(l[1]=r(" 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪 "))]),_:1})]),_:1})]),_:1}))}});export{U as default};