Vue 实现文本溢出展开和收起的功能

本文的主要思路是判断dom元素的高度有没有超过规定高度,如果超过规定高度的话就通过动态绑定class的方法绑定溢出省略的样式,然后通过展开和收起按钮控制状态的改变来实现是否绑定溢出样式来实现展开与收起,该思路能够简单的实现展开与收起的功能。

 

本次实现的是溢出两行省略,以下是溢出两行省略的css代码

.close {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical; //盒子中内容竖直排列
    }

给需要实现的dom元素动态绑定上该样式

<div :class="{ close: isClose }" ref="explainText">
    {{ explain.function ? explain.function : '-' }}
</div>
<div v-if="isOver" @click="changeStatus">
    <span>{{ textStatus }}</span>
</div>
data() {
  return {
    isClose: false,
    isOver: false,
    textStatus: '展开'
  }
},

通过修改isClose变量的状态来实现展开与收起,isOver变量来控制是否显示展开/收起这个按钮。

接下来是如何获取dom元素的高度,通过$refs获取元素的offsetHeight的属性,该属性为dom元素的高度。注意,在vue生命周期中create和mounted是无法获取到的,此时dom还未渲染好,解决的方法一种是通过setTimeout方法延迟获取高度,另一种是在向后端请求数据之后在finally()中获取,本文采用后者。

    getData() {
      getData()
        .then(response => {
  
        })
        .finally(() => {
          const height = this.$refs.explainText.offsetHeight
          if (height > 32) {
            this.isOver = true
            this.textStatus = '展开'
            this.isClose = true
          }
        })
    },

然后在页面created生命周期中进行调用就能获取到dom的高度,32px是两行文本的dom元素高度,高度大于32px即文本超过了两行,这里由于写死了,存在一定的隐患。

之后可以通过按钮的点击来切换展开和收起的状态

changeStatus() {
  if (this.textStatus === '展开') {
    this.textStatus = '收起'
    this.isClose = false
  } else if (this.textStatus === '收起') {
    this.textStatus = '展开'
    this.isClose = true
  }
}

  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值