vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数!

这篇具有很好参考价值的文章主要介绍了vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

平时开发中我们经常会遇到这样的需求,在一个不限高度的盒子中会有很多内容,如果全部显示用户体验会非常不好,所以可以先折叠起来,当内容达到一定高度时,显示展开更多按钮,点击即可显示全部内容,先来看看效果图:

vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数!

 这样做用户体验瞬间得到提升,接下来看看具体细节。

<div class="like-box" v-if="likeList.length>0">
     <span class="like-triangle"></span>
     主要操作在内容这里
     <ul class="like-person" ref="content" :style="{ 'max-height': status ? textHeight : auto }" :class="{ statusText: status }">
        <li class="person" v-for="(item,index) in likeList" :key="index" @click="personCenter">
           <i class="iconfont icon-dianzan"></i>
           <span>{{item.username}}</span>
           <span>,</span>
           </li>
     </ul>
     <div @click="moreClick" v-if="isShowMore">
        <div class="shenglue">……</div>
        <div class="more">展开更多</div>
     </div>
</div>

样式大家可依据自己项目需求进行设计,这里就不贴了,主要说几个关键的。

1、在data中定义三个属性

isShowMore: false,  // 控制展开更多的显示与隐藏

textHeight: null,  // 框中内容的高度

status: false,  // 内容状态是否打开

2. 计算内容是否超出两行

获取内容高度时要使用this.$nextTick()保证获取到的高度时DOM渲染完成后的高度

 mounted () {
    // 计算展开更多内容超出显示
    this.$nextTick(() => {
      // 这里具体行数可依据需求自定义
      let lineHeight = 27 * 2
      this.textHeight = `${lineHeight}px`
      if (this.$refs.content.offsetHeight > lineHeight) {
        this.isShowMore = true
        this.status = true
      } else {
        this.isShowMore = false
        this.status = false
      }
    })
}

3.给内容框绑定动态style和动态class

用status来判断,若为true,添加动态style,设置最大高度为2行内容的高度,相反高度auto,另外添加动态class,让内容为overflow: hidden,主要就是这两个样式在控制。最后给展开更多添加点击事件,隐藏自己。

 .statusText {
    overflow: hidden;
  }

好啦,具体就是这样啦,挺简单的,好像我废话比较多,欢迎各位大佬随时指正! 文章来源地址https://www.toymoban.com/news/detail-424095.html

到了这里,关于vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue element表格某一列内容过多,超出省略号显示

    在使用element组件库里面的table组件时,遇到某一个字段内容过多,导致td高度被撑开,布局显得很不美观, 这时我们只要给table-cloumn添加一个属性show-overflow-tooltip。 实现超出隐藏,并有提示,这样的话会有下面效果: 提示的长度特别长,超出了屏幕,不太好看。  可以在处

    2024年02月15日
    浏览(43)
  • 记录--多行标签超出展开折叠功能

     记录分享每一个日常开发项目中的实用小知识,不整那些虚头巴脑的框架理论与原理,之前分享过抽奖功能、签字功能等,有兴趣的可以看看本人以前的分享。  今天要分享的实用小知识是最近项目中遇到的标签相关的功能,我不知道叫啥,姑且称之为【多行标签展开隐藏

    2024年02月11日
    浏览(39)
  • uniapp小程序超出一行显示...并展示更多按钮

    循环获取所有需要展示数据标签的高度 控制显示信息数据的行数(默认是自动换行 高度超过20的话就不换行省略并且添加全部按钮) 标签的样式

    2024年01月21日
    浏览(47)
  • Android——使用ScrollView实现滚动效果,当内容超出屏幕范围时自动滑动显示

    Android——使用ScrollView实现滚动效果,当内容超出屏幕范围时自动滑动显示 ScrollView是Android中常用的布局容器,用于在屏幕空间有限的情况下实现内容的滑动显示。当内容超出屏幕范围时,用户可以通过滑动屏幕来查看更多内容,提供了更好的用户体验。 在Android中,使用Sc

    2024年01月16日
    浏览(47)
  • 【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号

            element plus中el-table采用的是el-scrollbar,无法采用全局默认滚动条样式修改,需要单独写公共样式。 原生滚动条样式 el-table滚动条样式 效果图:         el-table设置了自定义样式后,为el-table-column添加fixed=\\\"right\\\"属性,此时表格侧边栏固定列出现样式错乱,自定义

    2024年02月12日
    浏览(57)
  • 微软将推出更多Edge特有功能,与Chrome展开竞争

    微软在 2018 年宣布将推出基于 Chromium 构建的 Edge 浏览器,并于 2020 年 1 月推出了新版 Edge。如今时隔三年,根据统计 Edge 全平台的市场占有率仅为 4.23%,如果只考虑桌面端的话,Edge 的市场占有率则是 10.98%,这两个数据均远远落后于 Chrome 的 64.68% 和 66.14%。 再加上 Edge 如今已

    2024年02月17日
    浏览(50)
  • 文字内容超出两行时显示省略号

    设置内容超出两行显示省略号的css样式如下: 这个样式可用于uniapp的微信小程序开发。

    2024年02月13日
    浏览(57)
  • vue3自定义指令实现超出显示省略号,鼠标浮入弹出title,显示全部文本

    mounted 和 updated 是 Vue 生命周期钩子函数,分别表示 指令挂载到元素 和 指令所在组件更新时触发 。 el : HTMLElement 和 binding : DirectiveBinding 是方法参数, el 表示指令作用的元素, binding 包含指令的绑定值、参数和修饰符等信息。 el.offsetWidth 获取的是元素在渲染时所占据的整体

    2024年02月01日
    浏览(48)
  • css自适应高度或宽度,超出内容显示滚动条

    有时候项目中使用了flex布局,高度或是宽度是自动填满剩余空间,不是具体的数值的时候,想要设置区域滚动条,可采用以下方法设置:

    2024年02月13日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包