自定义一个各端通用的文本省略组件（ellipsis）

　　组件效果图：
　　现有方案壁垒：
　　如果你做的是前端开发，你可能会经常遇到长度不够或高度不够时进行文本省略，这个也很简单，如下css代码就可以实现1行或n行的自动省略：一行多余省略：。ttextoneline｛overflow：hidden；textoverflow：ellipsis；whitespace：nowrap；｝n行多余省略：。ttextnline｛display：webkitbox；wordbreak：breakall；textoverflow：ellipsis；overflow：hidden；webkitboxorient：vertical；webkitlineclamp：2；只需改变这里值为n即可｝
　　上面针对多余文字通过省略隐藏达到样式不变的效果，但是用户无法看到内容的全部文字，或者说需要一些处理才可以让用户看到，例如点击跳转详情页展示或者tip提示组件等，总之用起来缺乏美感。
　　场景描述：
　　文本要能全部展示，而且通过用户主动触发展示与不展示。因为用户一般只会对自己感兴趣的文章才会看全文，这样就需要一个既能满足上面简单需求，又能满足全文查看，且方便用户操作的体验友好的组件，这也是本组件编写的目的。
　　兼容性：
　　需要全端兼容所以使用uniapp框架，满足easycom组件规范，用户导入hbuilder后直接通过标签引用使用，非常方便。
　　实现原理：
　　根据原view设置的默认显示行数、文字大小等信息，虚拟一个相同的view容器，该view中把文字全部展示出来，通过以上信息计算出每行大概有多少个字符（汉字算两个，其他算1个），根据字符数对全文内容进行截取，再通过原view高度和虚拟view高度比较如果相等则停止计算，得到最终需要显示的字符串进行渲染。
　　直接上正文，自定义组件全过程：
　　1。hbuilder新建一个项目，选择默认第一个hellouniapp模板即可；
　　2。项目根目录下新建components目录；
　　3。在components目录下新建组件目录，例如这里命名为kevyellipsis的组件目录；
　　4。在kevyellipsis目录下新建kevyellipsis。vue文件，其内容为组件代码
　　kevyellipsis。vue代码如下：templateviewclasstwrap！虚拟view用于计算，计算完成则消失viewclassttxthide：idhidvif！isCompute：style〔computeStyle（0）〕｛｛testContent？testContent：content｝｝｛｛showSymbol？。。。：｝｝textvifexpandTextcollapseTextclasstbutton｛｛expandText｝｝textview！真实显示的内容viewclasstellipsis：idid：style〔！isCompute？computeStyle（1）：computeStyle（2）〕clickcontentClick｛｛（！isComputeexpand）？content：（actualContent（showSymbol？。。。：））｝｝textvifexpandTextcollapseTextshowSymbolclasstbuttonclick。stopchangeCollapse：style｛color：actionFontColor，float：right｝｛｛！expand？expandText：collapseText｝｝textview！这里加入了自定义的动态骨架屏友好反馈viewvif！isComputerows0classtskeletonviewclassskeletonsvfor（item，index）inrowsviewclassemptyviewviewviewviewtemplatestylelangscssscoped。twrap｛width：100；boxsizing：borderbox；position：relative；｝。ttxthide｛wordbreak：breakword；position：absolute；top：999999px；left：999999px；zindex：1000；top：0rpx；width：100；margin：0rpx；textalign：justify；｝。tellipsis｛textalign：justify；boxsizing：borderbox；width：100；wordbreak：breakword；position：relative；left：99999px；｝。tskeleton｛width：100；height：100；boxsizing：borderbox；position：absolute；top：0rpx；left：0rpx；｝。skeletons：firstchild｛margintop：0rpx！important；｝。skeletons｛position：relative；display：block；overflow：hidden；width：100；height：32rpx；margintop：12rpx；backgroundcolor：rgba（0，0，0，0。06）；boxsizing：borderbox；｝。skeletons。empty｛display：block；position：absolute；width：100；height：100；webkittransform：translateX（100）；transform：translateX（100）；background：lineargradient（90deg，transparent，rgba（216，216，216，0。753），transparent）；webkitanimation：loading。8sinfinite；animation：loading。8sinfinite；｝keyframesloading｛100｛webkittransform：translateX（100）；transform：translateX（100）；｝｝style
　　5。在kevyellipsis同目录下新建kevyellipsis。min。js，即上面代码中引入的工具类，为了防止他人冒用这里进行了代码混淆（如需该工具类源码关注并评论回复留下邮箱），代码如下：usestrict；functiontypeof（e）｛return（typeoffunctiontypeofSymbolsymboltypeofSymbol。iterator？function（e）｛returntypeofe｝：function（e）｛returnefunctiontypeofSymbole。constructorSymbole！Symbol。prototype？symbol：typeofe｝）（e）｝functionownKeys（t，e）｛varo，nObject。keys（t）；returnObject。getOwnPropertySymbols（oObject。getOwnPropertySymbols（t），e（oo。filter（function（e）｛returnObject。getOwnPropertyDescriptor（t，e）。enumerable｝）），n。push。apply（n，o）），n｝functionobjectSpread（t）｛for（vare1；eprepdatatrack34strong组件使用strongprecodetemplateviewclasscontent！这里模拟通过请求js动态赋值kevyellipsisvifcontentcontent。length0：contentcontentfontcolor666666：fontsize32：rows3contentClickmyclickcollapseText收起expandText展开actionFontColor007affkevyellipsisviewclassmgview！这里模拟直接复制给组件（例如循环）kevyellipsiscontent这是一个uniapp通用的超长文本处理组件，简单的设置达到自动适配超长文本溢出兼容效果。这是一个uniapp通用的超长文本处理组件，简单的设置达到自动适配超长文本溢出兼容效果。这是一个uniapp通用的超长文本处理组件，简单的设置达到自动适配超长文本溢出兼容效果。这是一个uniapp通用的超长文本处理组件，简单的设置达到自动适配超长文本溢出兼容效果。这是一个uniapp通用的超长文本处理组件，简单的设置达到自动适配超长文本溢出兼容效果。这是一个uniapp通用的超长文本处理组件，简单的设置达到自动适配超长文本溢出兼容效果。fontcolor666666：fontsize32：rows3contentClickmyclickcollapseText收起expandText展开actionFontColor007affkevyellipsisviewtemplatestylescoped。content｛boxsizing：borderbox；width：100；padding：24rpx；｝。mg｛padding：50rpx；｝style方法和属性名称
　　类型
　　描述
　　content
　　String
　　文本内容，默认’’
　　rows
　　Number
　　展示行数，默认1
　　fontSize
　　Number
　　文本字体大小，单位rpx，默认28
　　fontColor
　　String
　　文本字体颜色，默认666666
　　collapseText
　　String
　　收起操作的文案，默认’’
　　expandText
　　String
　　展开操作的文案，默认’’
　　actionFontColor
　　String
　　收起、展开操作文字颜色，默认’007aff’
　　contentClick
　　Func
　　文本点击事件函数
　　如果想用现成的，在插件详情页通过hbuilder直接导入即可，插件市场插件详情页地址为：
　　https：ext。dcloud。net。cnplugin？id11511
　　如果本文对您有帮助，还请帮忙点个赞或留下宝贵意见哦，总之谢谢您啦。