vue---展示内容超过指定行数后展开收起功能

最新推荐文章于 2024-04-16 15:25:15 发布
最新推荐文章于 2024-04-16 15:25:15 发布
阅读量6.4k 收藏 35
点赞数 7
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maidu_xbd/article/details/119512090
版权

问题描述

实现功能要求如下图

 解决方法

思路：假设展示区域每行高度为a，当内容超出1行高度a时需要设置展开/收起功能。

变量如下：

 list: [], //列表数据
 listId: "", //当前选择的id
 listHeight: null, //列表区域的显示高度
 listOpenFlag: false, //为true时，展开；为false时，收起
 showListBtnFlag: false, //为true时，出现展开-收起；为false,不出行展开-收起

给展示区域动态绑定样式max-height，listHeight=a,为一行的高度，也可根据现实行数，更改为2a或3a等等。

 <div
      class="list"
      ref="list"
      :style="{ 'max-height': listOpenFlag ? listHeight : '' }"
    >
      <li
        v-for="item in list"
        :key="'list_' + item.id"
        :class="listId == item.id ? 'active' : ''"
        :label="item.id"
        @click="handleChange('list', item)"
      >
        <template> {{ item.name }}</template>
      </li>
      <li
        v-if="showListBtnFlag"
        @click="listOpenFlag = !listOpenFlag"
        class="btn"
      >
        {{ listOpenFlag ? "展开" : "收起" }}
      </li>
    </div>
 mounted() {
    this.$nextTick(() => {
      setTimeout(() => {    
        this.calculateList();
      }, 300);
    });
  },
  methods: {
       calculateList() {
          // 这是默认一行数据的高度
          let oneHeight = 49;
          this.listHeight = `${oneHeight}px`;
          let curHeight = this.$refs.list.offsetHeight;
          if (curHeight > oneHeight) {
            this.listOpenFlag = true;
            this.showListBtnFlag = true;
          } else {
            this.listOpenFlag = false;
            this.showListBtnFlag = false;
          }
        },
  }

当内容大于1行时，【this.listOpenFlag=true; this.showListBtnFlag = true;】,则【max-height:'a ’】,只显示一行内容，且显示展开按钮;点击展开按钮【 @click="listOpenFlag = !listOpenFlag"】，将listOpenFlag置为false,此时展示收起按钮，且【max-height:' ’】，所有内容都被展示出来。

完整代码

<template>
  <div class="fold">
    <h2>1.文本展开/收起</h2>
    <div class="text">
      <span
        :style="{ 'max-height': textOpenFlag ? textHeight : '' }"
        :class="{ unfoldText: textOpenFlag }"
        class="titleText"
        ref="desc"
      >
        {{ name }}
      </span>
      <span
        v-if="showBtnFlag"
        @click="textOpenFlag = !textOpenFlag"
        class="btn"
        >{{ textOpenFlag ? "展开" : "收起" }}</span
      >
    </div>
    <h2>2.根据选项数量动态展开/收起</h2>
    <div
      class="list"
      ref="list"
      :style="{ 'max-height': listOpenFlag ? listHeight : '' }"
    >
      <li
        v-for="item in list"
        :key="'list_' + item.id"
        :class="listId == item.id ? 'active' : ''"
        :label="item.id"
        @click="handleChange('list', item)"
      >
        <template> {{ item.name }}</template>
      </li>
      <li
        v-if="showListBtnFlag"
        @click="listOpenFlag = !listOpenFlag"
        class="btn"
      >
        {{ listOpenFlag ? "展开" : "收起" }}
      </li>
    </div>
    <div
      class="subList"
      ref="subList"
      :style="{ 'max-height': subListOpenFlag ? subListHeight : '' }"
    >
      <li
        v-for="item in subList"
        :key="'subList_' + item.id"
        :class="subListId == item.id ? 'active' : ''"
        :label="item.id"
        @click="handleChange('subList', item)"
      >
        <template> {{ item.name }}</template>
      </li>
      <li
        v-if="showSubListBtnFlag"
        @click="subListOpenFlag = !subListOpenFlag"
        class="btn"
      >
        {{ subListOpenFlag ? "展开" : "收起" }}
      </li>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name:
        "这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子",
      textHeight: null,
      textOpenFlag: false,
      showBtnFlag: false,
      list: [], //列表数据
      listId: "", //当前选择的id
      listHeight: null, //列表区域的显示高度
      listOpenFlag: false, //为true时，展开；为false时，收起
      showListBtnFlag: false, //为true时，出现展开-收起；为false,不出行展开-收起
      subList: [],
      AllSubList: [],
      subListId: "",
      subListHeight: null,
      subListOpenFlag: false,
      showSubListBtnFlag: false
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.calculateText();
        this.calculateList();
        this.calculateSubList();
      }, 300);
    });
  },
  methods: {
    getList() {
      var list = [
        {
          id: 1,
          name: "水果",
          childrenList: [
            { id: 1, name: "苹果" },
            { id: 2, name: "香蕉" },
            { id: 3, name: "橘子" },
            { id: 4, name: "西瓜" },
            { id: 5, name: "菠萝" },
            { id: 6, name: "榴莲" },
            { id: 7, name: "龙眼" },
            { id: 8, name: "菠萝蜜" },
            { id: 9, name: "荔枝" },
            { id: 10, name: "山竹" },
            { id: 11, name: "葡萄" },
            { id: 12, name: "提子" },
            { id: 13, name: "猕猴桃" },
            { id: 14, name: "圣女果" },
            { id: 15, name: "水蜜桃" },
            { id: 16, name: "柿子" },
            { id: 17, name: "李子" },
            { id: 18, name: "鸭梨" }
          ]
        },
        {
          id: 2,
          name: "动物",
          childrenList: [
            { id: 19, name: "猴子" },
            { id: 20, name: "大象" },
            { id: 21, name: "小猪" },
            { id: 22, name: "熊猫" },
            { id: 23, name: "金毛" },
            { id: 24, name: "猫咪" },
            { id: 25, name: "狮子" },
            { id: 26, name: "老虎" },
            { id: 27, name: "长颈鹿" }
          ]
        },
        {
          id: 3,
          name: "植物",
          childrenList: [
            { id: 28, name: "吊兰" },
            { id: 29, name: "绿萝" },
            { id: 30, name: "绿萝" },
            { id: 31, name: "发财树" },
            { id: 32, name: "虎皮兰" },
            { id: 33, name: "大蒜" },
            { id: 34, name: "果树" },
            { id: 35, name: "花朵" },
            { id: 36, name: "芦苇" },
            { id: 37, name: "仙人掌" }
          ]
        },
        {
          id: 4,
          name: "交通工具",
          childrenList: [
            { id: 38, name: "汽车" },
            { id: 39, name: "自行车" },
            { id: 40, name: "卡车" },
            { id: 41, name: "摩托车" },
            { id: 42, name: "火车" },
            { id: 43, name: "动车" },
            { id: 44, name: "高铁" },
            { id: 45, name: "轿车" }
          ]
        }
      ];
      this.list = [{ name: "全部", id: "" }].concat(list);
      let subList = [{ name: "全部", id: "" }];
      list.forEach(item => {
        if (item.childrenList) {
          subList = subList.concat(item.childrenList);
        }
      });
      this.subList = subList;
      this.AllSubList = subList;
    },
    handleChange(type, item) {
      if (type == "list") {
        if (this.listId != item.id) {
          //this.listId != item.id防止多次点击同一个选项，出现重复执行以下代码
          this.listId = item.id;
          if (item.id == "") {
            this.subList = this.AllSubList;
          }
          if (item.childrenList) {
            this.subList = [{ name: "全部", id: "" }].concat(item.childrenList);
          }
          this.$nextTick(() => {
            this.calculateSubList();
          });
        }
      } else {
        this.subListId = item.id;
      }
    },
    calculateText() {
      // 这是默认两行数据的高度，一行的高度可以自定义 可以*3 *4达到三行或者四行显示展示和收起的效果
      let twoHeight = 26 * 2;
      this.textHeight = `${twoHeight}px`;
      let curHeight = this.$refs.desc.offsetHeight;
      if (curHeight > twoHeight) {
        this.textOpenFlag = true;
        this.showBtnFlag = true;
      } else {
        this.textOpenFlag = false;
        this.showBtnFlag = false;
      }
    },
    calculateList() {
      // 这是默认一行数据的高度
      let oneHeight = 49;
      this.listHeight = `${oneHeight}px`;
      let curHeight = this.$refs.list.offsetHeight;
      if (curHeight > oneHeight) {
        this.listOpenFlag = true;
        this.showListBtnFlag = true;
      } else {
        this.listOpenFlag = false;
        this.showListBtnFlag = false;
      }
    },
    calculateSubList() {
      // 这是默认两行数据的高度
      let twoHeight = 48 * 2;
      this.subListHeight = `${twoHeight}px`;
      let curHeight = this.$refs.subList.offsetHeight;
      if (curHeight > twoHeight) {
        this.subListOpenFlag = true;
        this.showSubListBtnFlag = true;
      } else {
        this.subListOpenFlag = false;
        this.showSubListBtnFlag = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
@mainColor: #5864ff;
.fold {
  padding: 22px;
  margin: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26);
  border-radius: 10px;
  // 1.文字收缩
  .text {
    position: relative;
    margin-bottom: 20px;
    .titleText {
      font-size: 18px;
    }
    .unfoldText {
      overflow: hidden;
      display: block;
    }
    .unfoldText:after {
      z-index: 3;
      content: "...";
      position: absolute;
      bottom: 0px;
      right: 80px;
      width: 48px;
      padding-left: 30px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0.1), #fff 45%);
    }
  }
  .btn {
    font-size: 14px;
    color: @mainColor;
    position: absolute;
    right: 0px;
    bottom: 2px;
    background-color: #fff;
    padding-left: 60px;
    padding-right: 10px;
    &:hover {
      color: orange;
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: 10px;
    li {
      background-color: #f5f6fa;
      padding: 8px 15px 8px 10px;
      margin-bottom: 15px;
      margin-right: 10px;
      white-space: nowrap;
      &:hover {
        background-color: @mainColor;
        color: #fff;
      }
    }
    .active {
      background-color: @mainColor;
      color: #fff;
    }
    .btn {
      font-size: 14px;
      position: absolute;
      right: -10px;
      background-color: #fff;
      bottom: 0px;
      &:hover {
        color: orange;
        background-color: #fff;
      }
    }
  }

  .subList {
    background-color: #f5f6fa;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    li {
      margin: 15px;
      white-space: nowrap;
      &:hover {
        color: @mainColor;
      }
    }
    .active {
      color: @mainColor;
    }
    .btn {
      background-color: #f5f6fa;
      position: absolute;
      right: -20px;
      bottom: 0px;
      padding: 0px 20px;
      &:hover {
        color: orange;
      }
    }
  }
}
</style>

参考：https://www.cnblogs.com/yhhBKY/p/14102687.html

maidu_xbd
关注
  • 7
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
01-21
文字比较难解释，直接看图应该就懂是要做什么了。 需求 工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。 思路首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号为2的部分会根据1的行数判断缩进的大小，然后展示第四行。最后通过背景色的控制让两者看上去是一段文字。 代码 核心代码是中间那部分，其他的不用关注 <template
【Vue小功能】默认展示3条数据，点击展开显示所有和收起显示3条数据的功能
Hemri2580的博客
10-16 2231
【Vue小功能】默认展示3条数据，点击展开显示所有和收起显示3条数据的功能
vue 内容超出 实现 展开、收起功能
最新发布
Z18834071903的博客
04-16 489
vue 内容超出 实现 展开、收起功能
【vue】实现超过两行或多行显示展开收起 (单个展开收起和数组多个展开收起)
Gh的博客
03-28 5822
vue实现超过两行或者多行显示展开收起, 一段文字的展开收起 和 多段文字（数组多个数据）的展开收起
vue封装一个多行文本展开收起的组件
weixin_54233971的博客
05-04 458
1、 利用css样式让展开收起按钮浮动后，与文本处在同一个空间内。2、通过动态样式，来切换展开和收起的不同文本样式和高度。
vue之点击“展开/收回”功能实现（两种情况）
m0_64054560的博客
02-16 5955
vue实现展开收回功能，两种情况简单应对，列表展开显示全部、部分数据展开收回，菜鸟版基础教程
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！
weixin_68878908的博客
01-13 5847
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！超简单方法！！！！
对于超出一行的文本进行（展开/收起）操作的vue组件，实测好用
MoYu的博客
06-29 1083
vue自定义组件
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
JavaScript聊天室@功能实现示例 vue-tribute-demo
06-23
总结起来，"vue-tribute-demo"项目展示了如何在Vue.js应用中实现一个动态的@提及聊天室功能，包括动态获取提及用户列表、处理选中人员的数据以及删除已提及人员。它利用了Tribute.js库来简化开发流程，并结合Vue.js...
vue-print-nb 兼容低版本浏览器
11-28
4. **优雅降级**：对于确实无法支持的功能，`vue-print-nb` 可能采取优雅降级的策略，即在不支持某些功能的浏览器中提供基本的、功能简化的打印服务。 综上所述，`vue-print-nb` 是一个致力于解决Vue.js应用打印...
Vue3: 数据过多条数的隐藏与展示(展开折叠功能)
weixin_44016350的博客
12-15 3196
Vue3: 数据过多条数的隐藏与展示(展开折叠功能)
vue实现数据超出单行显示更多,点击展开剩余数据
鲁小班的博客
03-31 5313
vuejs数据超出单行显示更多,点击展开剩余数据
Vue 文字超出行数后，显示省略号，并且尾部拼接 展开与收起功能
qq_38774121的博客
03-30 4401
Vue 文字超出行数后，显示省略号，并且尾部拼接 展开与收起功能。
vue-el-table中实现多行点击展开和隐藏
喵九~
08-09 8473
本文是为了记录曾经踩过的坑，愿以后的日子里不再踩坑 在vue中，el-table十分常用，有时会出现这样一种交互，就是表格中的某项大于xxx行时显示查看全部按钮，点击可以展开和收起，如下： 这里是超过八行展示查看全部按钮，少于等于八行就正常展示 点击查看全部，按钮变成收起，点击收起，按钮恢复原状 如下： 其他列就不再赘述，只看展开收起这一列，下面来看实现： 思路： 因为list里并没有...
VUE中实现长文本的展开和收起功能的三种方式
热门推荐
朱宏的博客
08-26 1万+
在VUE入门到放弃的时候，遇见了你，叫我实现长文本的展开和收起功能。经过不断的放弃过程，最后总结了三种方式实现。 1.利用VUE中的过滤器filter实现 过滤器的基本样式是这样的： filters: {capitalize: function (value) {if (!value) return ''value = value.toString()retur...
uni-app Vue3文字超出规定行数时显示展开和收起功能
qq_44719598的博客
07-29 3511
uni-app基于Vue3实现文字超出规定行数展开和收起功能，在vue2中也可以实现。可以根据这套代码进行修改为vue2的版本
vue 中 标题字数过长，超出部分用...代替的方法
yh8899abc的博客
06-11 5397
如下代码： <el-tooltip class="item" effect="dark" :content="item.value" placement="top"> <span>{{item.value | ellipsis}}</span> </el-tooltip> 加上个过滤器即可 filters: { // 当标题字数超出时，超出部分显示’...‘。此处限制超出8位即触发隐藏效果 ellipsis (value) {
vue+vant实现文本超出一行显示展开和收起
weixin_43299180的博客
11-14 2537
随手记录一个小的组件：再写 H5 的时候遇到这样一个小的效果，文本超出一行右侧显示展开按钮，点击可以展开和收起超出的文本；效果很简单，这里记录一下，方便以后之间用；后面需要的时候还可以动态传入字体颜色、字号等属性；我这里是在 H5 项目中使用的，引用了插件会自动将 px 单位转化为 rem；
uniapp中文本内容超出规定行数后展开收起的处理
07-15
在 Uniapp 中处理文本内容超出规定行数后展开收起可以使用以下方法： 1. 使用 CSS 样式实现： - 在需要展开收起的文本外层容器上加上 `overflow: hidden;` 和 `max-height` 属性，限制文本的高度。 - 使用 CSS 伪类 `:after` 添加展开收起按钮，并设置样式。 - 使用 CSS 动画或过渡效果实现展开收起的动画效果。 - 通过 JavaScript 监听按钮的点击事件，切换文本容器的样式，实现展开收起的功能。 2. 使用 Vue 自定义指令实现： - 创建一个自定义指令，在指令中通过 DOM 操作获取文本容器的高度和行数。 - 根据文本容器的高度和行数，判断是否超出规定行数，如果超出则显示展开收起按钮。 - 通过指令绑定的事件监听按钮的点击事件，切换文本容器的样式，实现展开收起的功能。 具体实现方式可以根据你的项目需求和技术栈选择相应的方法。以上是一种常见的处理方式，希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值