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

　　组件效果图：
　　现有方案壁垒：
　　如果你做的是前端开发，你可能会经常遇到长度不够或高度不够时进行文本省略，这个也很简单，如下css代码就可以实现1行或n行的自动省略：/*一行多余省略：*/ .t-text-oneline {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap; } /*n行多余省略：*/ .t-text-nline {   display: -webkit-box;   word-break: break-all;   text-overflow: ellipsis;   overflow: hidden;   -webkit-box-orient: vertical;   -webkit-line-clamp: 2; /*只需改变这里值为n即可*/ }
　　上面针对多余文字通过省略隐藏达到样式不变的效果，但是用户无法看到内容的全部文字，或者说需要一些处理才可以让用户看到，例如点击跳转详情页展示或者tip提示组件等，总之用起来缺乏＂美感＂。
　　场景描述：
　　文本要能全部展示，而且通过用户主动触发展示与不展示。因为用户一般只会对自己感兴趣的文章才会看全文，这样就需要一个既能满足上面简单需求，又能满足全文查看，且方便用户操作的体验友好的组件，这也是本组件编写的目的。
　　兼容性：
　　需要全端兼容所以使用uniapp框架，满足easycom组件规范，用户导入hbuilder后直接通过标签引用使用，非常方便。
　　实现原理：
　　根据原view设置的默认显示行数、文字大小等信息，虚拟一个相同的view容器，该view中把文字全部展示出来，通过以上信息计算出每行大概有多少个字符（汉字算两个，其他算1个），根据字符数对全文内容进行截取，再通过原view高度和虚拟view高度比较如果相等则停止计算，得到最终需要显示的字符串进行渲染。
　　直接上正文，自定义组件全过程：
　　1.hbuilder新建一个项目，选择默认第一个hello uniapp模板即可；
　　2.项目根目录下新建components目录；
　　3.在components目录下新建组件目录，例如这里命名为kevy-ellipsis的组件目录；
　　4.在kevy-ellipsis目录下新建kevy-ellipsis.vue文件，其内容为组件代码
　　kevy-ellipsis.vue代码如下：    
　　5.在kevy-ellipsis同目录下新建kevy-ellipsis.min.js，即上面代码中引入的工具类，为了防止他人冒用这里进行了代码混淆（如需该工具类源码关注并评论回复留下邮箱），代码如下：＂use strict＂;function _typeof(e){return(_typeof=＂function＂==typeof Symbol&&＂symbol＂==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&＂function＂==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?＂symbol＂:typeof e})(e)}function ownKeys(t,e){var o,n=Object.keys(t);return Object.getOwnPropertySymbols&&(o=Object.getOwnPropertySymbols(t),e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,o)),n}function _objectSpread(t){for(var e=1;e

组件使用

    方法和属性名称
　　类型
　　描述
　　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.cn/plugin?id=11511
　　如果本文对您有帮助，还请帮忙点个赞或留下宝贵意见哦，总之谢谢您啦。