共计 2164 个字符，预计需要花费 6 分钟才能阅读完成。
vue-ellipsis-component 的诞生
文本缩略是业务中最常见的需要之一，通常咱们应用 webkit-line-clamp 实现文本缩略，但这仅限于多行缩略，若是万恶的 PM 脑子一热须要你反对超过某个高度时进行缩略 …… 为了让本人不会在这种场景下束手无措，我决定先摸索一下现有的 vue 缩略组件!
在一番寻找下，我发现一个 vue 缩略组件: 顾轶灵开源的 vue-clamp，大抵性能如下:
- 反对多行缩略
- 反对超过最大高度时缩略
- 反对自定义缩略符，同时反对自定义缩略符呈现的地位
- 反对缩略回调，在产生截断时触发
- 反对自适应缩略
vue-clamp 反对的性能挺全的，行数截断的实现原理也是相当乏味，次要是利用 getClientRects API 的个性，能够间接获取到行内元素的行数，因而不须要手动设置 line-height，具体能够查看 MDN!
然而 vue-clamp 只反对纯文本缩略，若是遇到富文本场景则顾此失彼，就在这时，我发现一个 react 的缩略组件: react-ellipsis，性能更全:
- 反对多行缩略
- 反对超过最大高度时缩略
- 反对自定义缩略符
- 反对缩略回调，在产生截断时触发
- 反对富文本缩略
- 反对尾文本过滤
- 反对自适应缩略
- 超过 n 行时展现 m 行
- 超过高度 n 时展现 高度 n
确认过眼神，是我须要的人 (✺ω✺) 惋惜它是个 react 组件，于是乎，动起手来，把它移植 (抄) 成 vue 组件~ vue-ellipsis-component 就这么诞生了!
简略介绍一下组件的性能以及原理
举一个 🌰
vue-ellipsis-component 残缺移植了 react-ellipsis 的性能 (抄也要抄得残缺)，举个简略的 demo:
<template>
<vue-ellipsis
:visible-line="2"
text="这是一段十分十分十分十分十分十分十分十分十分十分十分长的话">
</vue-ellipsis>
</template>更多的 demo 能够查看 文档 ~
缩略策略
vue-ellipsis-component 会依据传入 props 的复杂度采纳不同的缩略策略，比方下面的例子，只传入了 text 和 visibleLine 进行多行缩略，因而组件会基于惯例策略实现多行缩略: 利用 css -webkit-line-clamp 属性进行缩略; 若是须要在超过最大高度时进行缩略，则会采纳动静计算策略: 利用 JavaScript 动静计算得出缩略点，再进行文本内容的裁剪，比方以下的 demo:
<template>
<vue-ellipsis
:visible-height="60"
text="这是一段十分十分十分十分十分十分十分十分十分十分十分长的话">
</vue-ellipsis>
</template>并且在动静计算策略中，vue-ellipsis-component 应用二分法晋升了文本缩略的性能!
自适应缩略
vue-ellipsis-component 通过传入 reflowOnResize 开启自适应缩略，默认应用 ResizeObserver 监听容器的变动，若是浏览器不反对 ResizeObserver，则应用 window.resize 作为降级计划 😄
<template>
<vue-ellipsis
:visible-line="2"
text="这是一段十分十分十分十分十分十分十分长的话"
reflowOnResize>
</vue-ellipsis>
</template>富文本缩略
vue-ellipsis-component 通过传入 useInnerHtml 开启富文本缩略，将 text 作为 HTML 插入到 dom 中，因而须要自行确保 text 内容，避免 XSS 攻打!
<template>
<vue-ellipsis
:visible-line="2"
use-inner-html
text="<b> 这是一段 </b><u> 十分十分十分十分十分十分十分十分十分十分十分长 </u> 的话">
</vue-ellipsis>
</template>组件的有余
与 vue-clamp 不同的是，vue-ellipsis-component 须要你手动设置一个 line-height:
在满足惯例策略的状况下，是否被动设置 line-height 其实对缩略后果并没有影响，而在动静计算缩略下 line-height 则有可能会导致缩略后果不如预期；
动静计算的缩略策略，是依据 line-height 与传入的 visibleLine 进行计算得出一个可见高度，再利用可见高度和以后容器的高度做比拟，从而判断是否须要进行文本裁剪。能够看出，这一过程很大水平地依赖 line-height；当 line-height 为默认值 normal 时，理论的行高取决于浏览器，但各个浏览器的取值可能不太统一。vue-ellipsis-component 会兼容 line-height: normal 的状况，但为了保障在不同浏览器的缩略成果统一，最好还是被动设置一个 line-height！
仓库地址
Github 地址: vue-ellipsis-component
文档地址: docs
如果感觉对你有所帮忙，能够在你的我的项目中装置进行应用，或是给个 star ⭐️!
问题反馈
如果发现组件中存在的问题或是有余，能够提交你的问题到 github issue，或提交一个 Pull Request，感激你的参加!