uv-ui
Version:
基于vue3的移动端组件库
2 lines (1 loc) • 1.77 kB
JavaScript
;const n=require("vue"),f=require("../../utils/common.cjs");require("./text-ellipsis.vue_vue_type_style_index_0_lang.cjs");const N={name:"UvTextEllipsis"},S=Object.assign(N,{props:{content:{type:String,default:""},rows:{type:[String,Number],default:1},expandText:{type:String,default:""},collapseText:{type:String,default:""},dots:{type:String,default:"..."}},emits:["clickAction"],setup(i,{emit:v}){const s=i,u=n.ref(),y=n.ref(!1),c=n.ref(!1),p=n.ref(""),h=()=>{if(!u.value)return;const t=window.getComputedStyle(u.value),e=document.createElement("div");return Array.prototype.slice.apply(t).forEach(l=>{e.style.setProperty(l,t.getPropertyValue(l))}),e.style.position="fixed",e.style.zIndex="-9999",e.style.top="-9999px",e.style.height="auto",e.style.minHeight="auto",e.style.maxHeight="auto",e.innerText=s.content,document.body.appendChild(e),e},T=(t,e)=>{const{dots:o,content:l,expandText:a}=s;let d=0,x=l.length,g=-1;for(;d<=x;){const r=Math.floor((d+x)/2);t.innerText=l.slice(0,r)+o+a,t.offsetHeight<=e?(d=r+1,g=r):x=r-1}return l.slice(0,g)+o},m=()=>{const t=h();if(!t)return;const{paddingBottom:e,paddingTop:o,lineHeight:l}=t.style,a=(Number(s.rows)+.5)*f.pxToNum(l)+f.pxToNum(o)+f.pxToNum(e);a<t.offsetHeight?(y.value=!0,p.value=T(t,a)):(y.value=!1,p.value=s.content),document.body.removeChild(t)},E=t=>{c.value=!c.value,v("clickAction",t)};return n.onMounted(()=>{m()}),n.watch(()=>[s.content,s.rows],m),(t,e)=>(n.openBlock(),n.createElementBlock("div",{class:"uv-text-ellipsis",ref_key:"textEllipsisRef",ref:u},[n.createTextVNode(n.toDisplayString(c.value?i.content:p.value)+" ",1),n.createElementVNode("span",{onClick:E,class:"uv-text-ellipsis-action-text"},n.toDisplayString(c.value?i.collapseText:i.expandText),1)],512))}});module.exports=S;