关于前端:vueellipsiscomponent-满足多种场景的-vue-缩略组件

文本缩略是业务中最常见的需要之一，通常咱们应用 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，感激你的参加!

关于前端:vueellipsiscomponent-满足多种场景的-vue-缩略组件

vue-ellipsis-component 的诞生

简略介绍一下组件的性能以及原理

举一个 🌰

缩略策略

自适应缩略

富文本缩略

组件的有余

仓库地址

问题反馈