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

最新推荐文章于 2024-07-09 22:17:47 发布

原创

最新推荐文章于 2024-07-09 22:17:47 发布 · 3.6k 阅读

标签

#Vue #CSS #超出显示省略号 #javascript #html

收录于

本文介绍如何在Vue中处理数据请求后的内容显示。当内容超过指定行数时，超出部分隐藏并显示省略号及【查看全文】按钮。通过判断元素高度来控制显示状态，并探讨了使用ref和DOM操作的实践方法。

需求：

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

需求1

需求2

实现

思路

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

实践

//给文章内容元素设置ref ；绑定class样式hide_description，当hiddenText为true时有此class样式，false时不添加此class；
<p
   ref="programDescription"
   v-bind:class="{
     hide_description: hiddenText
   }"
>
    {
  
  { content }}
  </p>
//判断文章高度超出时显示按钮
<p class="show_al