vue 容超出三行之后显示下拉箭头（可适配富文本）

news2024/11/17 15:29:43

问题提出：后台返回富文本，前端实现内容超出三行之后显示下拉箭头，展示全部，还可以收起
难点：富文本内容不稳定会出现换行等或者字体大小问题会印象
ps：就算不是富文本只是正常的文章也是可以使用的呢

思路: 1.给文本设置行高30 ，总行高高度超出 90 即可显示箭头
2.超出90 之后才显示省略号（需要控制class动态添加）

易误区 1.提前添加省略号导致无法成功 2.给盒子设定了固定高度导致无法成功

<template>
  <div>
    <div class="Details_box_TheIntroduced">
      <div class="content" id="textContainer" >
        <div :class="[isShowZK == true ? 'overOld' : 'is_content']" class='content_box' >
          <div v-html='list.desc' ref="more" ></div>
        </div>
      </div>
      <div v-if="arrows" >
        <div class="icn_general_below hovercli"  v-if="isShowZK" @click="isShowZK = false">
          <img src="@/assets/img/stri_unfold.png" alt="">
        </div>
        <div class="icn_general_below hovercli" v-if="!isShowZK" @click="isShowZK = true">
          <img src="@/assets/img/packUp.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ScriptListParticulars from '@/serve/ScriptListParticulars'
export default ScriptListParticulars
</script>

<style lang="less">
.content{
  background: peachpuff;
}
.content_box{
  background: peachpuff ;
  line-height: 50px ;
  -webkit-line-clamp: 2;
}

.overOld{
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.is_content{
  height: 100%;
  -webkit-line-clamp: 2;
  background: papayawhip;
}
复制代码

js页面

watch: {
    list() {
        this.$nextTick(() => {
            let oneHeight = this.$refs.more.clientHeight
            if (oneHeight > 90) {
                this.isShowZK = true
                this.arrows = true
            } else {
                this.isShowZK = false
            }
        })
    },
   }
复制代码

代码解析：
this.$refs.more.clientHeight 获取到文本域的高度

90 是我单个行高是 30 * 3 = 90 可以根据具体情况修改
arrows 代表的是必须是超出之后才可以显示箭头：
有人会问那为什么不能直接使用 isShowZK 做判断呢是因为 isShowZK等于false的话就不会显示下拉箭头了或者就是 isShowZK == false 的时候也会显示其中一个箭头

下面的是自己修改了一些样式