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
    评论
vue和element-ui库提供的element-UI组件可以很容易地实现展开收起功能。 首先,我们可以使用element-ui的Collapse组件来创建一个可收缩的容器。在需要收起展开的元素外面包裹一个<Collapse>标签,在其中添加<CollapseItem>标签作为子组件。例如,我们可以像下面这样定义一个简单的容器: ``` <template> <div> <el-collapse v-model="activeNames"> <el-collapse-item title="点击展开内容" name="1"> <p>这是展开的内容</p> </el-collapse-item> </el-collapse> </div> </template> ``` 在这个例子中,点击标题的时候,内容会展开或者收起。 此外,我们还可以用element-ui的按钮组件<Button>来实现展开收起功能。我们可以在按钮的click事件中,通过改变一个data中的boolean值来控制展开收起。例如: ``` <template> <div> <el-button @click="toggleCollapse" type="primary">{{ isCollapse ? '展开' : '收起' }}</el-button> <el-collapse v-model="isCollapse"> <el-collapse-item title="内容" name="1"> <p>这是展开的内容</p> </el-collapse-item> </el-collapse> </div> </template> <script> export default { data() { return { isCollapse: false }; }, methods: { toggleCollapse() { this.isCollapse = !this.isCollapse; } } }; </script> ``` 在这个例子中,点击按钮会切换展开收起状态,并且按钮上的文本也会相应地改变。 综上所述,借助于vue和element-ui的组件,我们可以轻松地实现展开收起功能。通过Collapse组件或者按钮组件,我们可以根据具体需求选择合适的方式来实现
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值