Vue - 多行文本“展开、收起”功能

TextClamp

使用 js 实现文本展开、收起,并非纯 CSS 实现。

Props:

  • fontSize:Number,默认:14
  • lines:Number,默认:1
  • lineHeight:Number,默认:20

Feat:

  • 监听插槽的变化(文本内容的变化),自动计算文本高度
  • 展开、折叠时有 transition 效果
  • 文本内容较少时(未超过行数 lines),不会展示按钮

Code

text-clamp.vue


 



实例

123123
{{data || "--"}}

Vue - 多行文本“展开、收起”功能_第1张图片

你可能感兴趣的:(#,Vue,vue.js,前端,javascript)