组件效果图：

现有方案壁垒：

如果你做的是前端开发，你可能会经常遇到长度不够或高度不够时进行文本省略，这个也很简单，如下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

组件使用

方法和属性

如果想用现成的，在插件详情页通过hbuilder直接导入即可，插件市场插件详情页地址为：

https://ext.dcloud.net.cn/plugin?id=11511

如果本文对您有帮助，还请帮忙点个赞或留下宝贵意见哦，总之谢谢您啦。