Vue完成数据请求后内容超出显示省略号+显示查看全文按钮_vue超出字数显示省略号

作者：酷酷是懒虫 | 2024-07-27 05:10:32

踩

vue超出字数显示省略号

需求：

如下图，当Vue完成数据请求后，根据文章内容设置显示方式。10行以内的显示全文，不显示【查看全文】按钮；内容超过指定行数时，超出内容隐藏，末尾显示省略号并显示【查看全文】按钮。

需求1

需求2

实现

思路

在异步请求数据完成后，判断文章内容所在元素高度。根据元素高度控制元素class和按钮显示。

实践


//给文章内容元素设置ref ；绑定class样式hide_description，当hiddenText为true时有此class样式，false时不添加此class；
<p
   ref="programDescription"
   v-bind:class="{
     hide_description: hiddenText
   }"
>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/888798